Embed Video is not Responsive

Design help General
1

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

2

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

image
image1209×74 5.02 KB

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!

3

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
4

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 Element: clientWidth property - Web APIs | MDN

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 How To - Aspect Ratio / Height Equal to Width

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.

2 Likes