Fluid width videos (YouTube)

[drone4four]

I’m trying to use Chris Coyier’s guide on fluid width videos.

I was able to test his suggested code in my pen and get it working. Actually, my pen only sort of works. Chris’ code for the YouTube video “Hillbilly Hip Hop” in his example parses perfectly in my pen, but I can’t figure out how to make it so that my video “Singularity” also parses properly, just like his.

Can anyone spot what I am doing wrong?

Thanks for your attention.

[Beverleyh]

Both links are coming up broken.

[JeroenR]

You should use a wrapper around your iframe to make it work.

[Atelierbram]

Indeed, it is missing the so called “intrinsic ratio” .videoWrapper div, my fork of your demo:

https://codepen.io/atelierbram/pen/KmKJVz

One also shouldn’t change the values for width and height on the iFrame: just use the code-snippet that comes with YouTube.

[Beverleyh]

Are you guys seeing something I’m not? The links in the first post continue to be broken for me (both error 404). I’m on mobile though, if that’s got anything to do with it.

[Shikkediel]

On desktop you can hover to see that both links have an extra " at the end that’s breaking the redirect…

Article

Pen

[Beverleyh]

Ok – thanks. For a moment there I was worrying that some rogue redirects were intercepting mobile devices.

[drone4four]

Thanks @Atelierbram for your suggested CSS. Your pen serves as an enormous help. =D

[Author]

Posts