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?
How do you embed YouTube video, full width and auto height?
Moderator: General Moderators
-
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?
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
All the best from the United Kingdom.
Re: How do you embed YouTube video, full width and auto heig
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
Let's say I wanted to embed this code.
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.
Code: Select all
<iframe width="560" height="315" src="https://www.youtube.com/embed/3Ub6BdLFWyg" frameborder="0" allowfullscreen></iframe>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.
All the best from the United Kingdom.
Re: How do you embed YouTube video, full width and auto heig
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.
Re: How do you embed YouTube video, full width and auto heig
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
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.
All the best from the United Kingdom.