PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Mon May 21, 2018 9:09 pm

All times are UTC - 5 hours




Post new topic Reply to topic  [ 6 posts ] 
Author Message
PostPosted: Wed Jan 27, 2016 7:03 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4416
Location: United Kingdom
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.


Top
 Profile  
 
PostPosted: Wed Jan 27, 2016 7:25 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
Videos are typically 16:9, so if you have the width you can calculate the height.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Wed Jan 27, 2016 7:36 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4416
Location: United Kingdom
Let's say I wanted to embed this code.

Syntax: [ Download ] [ Hide ]
<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.


Top
 Profile  
 
PostPosted: Wed Jan 27, 2016 7:39 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
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.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Wed Jan 27, 2016 7:41 am 
Offline
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6424
Location: Montreal, Canada
You can also look at something like this: http://avexdesigns.com/responsive-youtube-embed/

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Wed Jan 27, 2016 7:53 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4416
Location: United Kingdom
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.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 6 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 1 guest


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group