How do you embed YouTube video, full width and auto height?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

How do you embed YouTube video, full width and auto height?

Post by simonmlewis »

We have a youtube video we want on our homepage, but we now want it to be 100% wide.

Easy. But we also need the height of the video to fit the video. I can adjust it in the iframe so it is 100% wide and 500px tall, but on a mobile that makes the video area very tall.

Is there a method to the height to be automatically correct for the width of the video? So it kind of "stretches/contracts" to fit?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you embed YouTube video, full width and auto heig

Post by Celauran »

Videos are typically 16:9, so if you have the width you can calculate the height.
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you embed YouTube video, full width and auto heig

Post by simonmlewis »

Let's say I wanted to embed this code.

Code: Select all

<iframe width="560" height="315" src="https://www.youtube.com/embed/3Ub6BdLFWyg" frameborder="0" allowfullscreen></iframe>
I want it to be 100% wide, and for the height to automatically be correct.
do I have to manually set the height? because on a phone, the side can be various so there will always be blacks up and below it. I want rid of the black borders.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you embed YouTube video, full width and auto heig

Post by Celauran »

Yes, the height needs to be set. If you don't specify a height, you get a very small default. As I've already mentioned, though, you've got the width and the aspect ratio, so it's trivial to calculate. As the viewport size changes, your width changes, so you recalculate the height.
User avatar
Celauran
Moderator
Posts: 6427
Joined: Tue Nov 09, 2010 2:39 pm
Location: Montreal, Canada

Re: How do you embed YouTube video, full width and auto heig

Post by Celauran »

You can also look at something like this: http://avexdesigns.com/responsive-youtube-embed/
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Re: How do you embed YouTube video, full width and auto heig

Post by simonmlewis »

Oooo i like that. Will have a go at what he wrote about. That's exactly it. Tho we set it to 100% wide, but will try it.
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply