Streaming live at 10am (PST)

Embed Video is not Responsive

I was using webflows video embed div for the past few months until Twitch changed their embed requirements and now I had to switch over to an embed code div and can’t seem to figure out how to make the video responsive

The width will change but the height of the video stays the same

How can I fix this?

-Alex


Here is my site Read-Only:

https://preview.webflow.com/preview/ship-ing?utm_medium=preview_link&utm_source=designer&utm_content=ship-ing&preview=a0e35b82a3457a7a59a5e3be8f03b341&mode=preview

Hey ho!
Your video embed does not get displayed at all. There is a CSP issue originating from twitch.

I could provide some custom code that resizes iframes based on the actual client’s device width. Let me know, if you’d want to try that!

Hi RDaneel_Oliwav

I’m down to give it a shot!

the temp fix I did was to add a fixed px in the iframe and then reduce the px size per device screen on webflow

I’m mostly waiting for embedly to fix the issue on their end seeing as that is what webflow uses in their video embed divs

Thanks
-Alex

1 Like

Necessities

give the custom code block with the class .html-embed-15 an id.
(You could use a class as the selector, but it’s more foolproof with a unique identifier!)

–> I gave it an id of #hero-video

image
Also give the custom code block a width of 100%.

Javascript

add custom JS to make the iframe the correct height based on its parent width using the 16:9 aspect ratio

Put this code in the before </body> section:

<script type="text/javascript">

window.addEventListener('DOMContentLoaded', (event) => {
  var videoWrapper      = document.getElementById('hero-video'),
      videoWrapperWidth = videoWrapper.clientWidth,
      videoHeight       = 0.5625 * videoWrapperWidth,
      iFrame            = videoWrapper.getElementsByTagName('iframe')[0];
  iFrame.setAttribute('height', `${videoHeight}px`);
});

</script>

I’ll explain here:

window.addEventListener('DOMContentLoaded', (event) => {
});

This is a Event listener, the code inside that is fired upon the content of the DOM being loaded (meaning all elements of that page exist)

var videoWrapper = document.getElementById('hero-video');

We get the custom code element with the id #hero-video to use it’s width for our calculation

var videoWrapperWidth = videoWrapper.clientWidth;

We create a variable that is assigned the inner width of videoWrapper in pixels
(Attributes such as padding will mess with us, as they are not considered here. Don’t use padding on this element)
See https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth

var videoHeight = 0.5625 * videoWrapperWidth;

We create a variable that is assigned the computed pixel value of the height based off of the 16:9 aspect ratio
See https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

var iFrame = videoWrapper.getElementsByTagName('iframe')[0];

We get the first <iframe> element inside of videoWrapper

iFrame.setAttribute('height', `${videoHeight}px`);

We override the height attribute for the <iframe>

DONE

This will not update when resizing the viewport, however that is usually not typically for normal users.

1 Like