So I have a video page where I embed a vimeo video. The trouble is, the aspect ratio is often wrong because I don't set the width and height. Leaving me with black bars on the video. I only pass in the vimeo ID dynamically, so I don't set a width and height per video.
Dynamic video ID like this:
<iframe src="/<?php echo $videoID; ?>?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
So, my question is, is there a way I can detect what the aspect ratio of the video should be?
I know there are lots of plugins that can help you maintain an aspect ratio for fluid widths, such as; -/
and you can achieve it with javascript as described on css-tricks: -.php
-- but these only work if you set the correct aspect ratio to begin with using the width and height attributes.
Most new vimeo videos seem to be width="400" height="225", but my website deals with some older videos that don't share this ratio, so you get black pipes either along the top and bottom of the video or down the sides.
It is these black pipes that I'm trying to remove on every video.
Appreciate any suggestions,
Alsweet
So I have a video page where I embed a vimeo video. The trouble is, the aspect ratio is often wrong because I don't set the width and height. Leaving me with black bars on the video. I only pass in the vimeo ID dynamically, so I don't set a width and height per video.
Dynamic video ID like this:
<iframe src="http://player.vimeo./video/<?php echo $videoID; ?>?title=0&byline=0&portrait=0" width="400" height="225" frameborder="0"></iframe>
So, my question is, is there a way I can detect what the aspect ratio of the video should be?
I know there are lots of plugins that can help you maintain an aspect ratio for fluid widths, such as; -http://fitvidsjs./
and you can achieve it with javascript as described on css-tricks: -http://css-tricks./NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
-- but these only work if you set the correct aspect ratio to begin with using the width and height attributes.
Most new vimeo videos seem to be width="400" height="225", but my website deals with some older videos that don't share this ratio, so you get black pipes either along the top and bottom of the video or down the sides.
It is these black pipes that I'm trying to remove on every video.
Appreciate any suggestions,
Alsweet
Share Improve this question asked Dec 6, 2013 at 4:05 alsweetalsweet 6331 gold badge12 silver badges27 bronze badges 4- I know this is old, any progress on this issue? – jackrugile Commented Jan 29, 2014 at 23:57
- Unfortunately I wasn't able to find a solid solution. My only option was to pick the most used ratio and roll with it. Most new YouTube and Vimeo videos have a consistent aspect ratio at least. The problem I was having was that I had a lot of old square vimeo videos as well. – alsweet Commented Feb 28, 2014 at 16:46
- 1 Sorry, forgot about this thread. I've been using oembed. to get embed code of the proper dimensions for both Vimeo and YouTube. Then you can throw it into a FitVids wrapper. – jackrugile Commented Feb 28, 2014 at 17:26
- There is a pure CSS method that does not require a JS librarby to have the video retain its aspect ratio. Answer below. – AJReading Commented Apr 26, 2015 at 20:45
1 Answer
Reset to default 12Getting the dimensions
You can use oEmbed. oEmbed is an API for displaying embedded content. You make a HTTP request to the service endpoint, for example:
Request example
http://www.youtube./oembed?url=https://www.youtube./watch?v=NWHfY_lvKIQ
And you recieve a JSON response with the video dimensions (among other useful information).
Response example:
{
"title": "Learning from StackOverflow.",
"height": 270,
"author_url": "http:\/\/www.youtube.\/user\/GoogleTechTalks",
"author_name": "GoogleTechTalks",
"provider_name": "YouTube",
"thumbnail_url": "http:\/\/i.ytimg.\/vi\/NWHfY_lvKIQ\/hqdefault.jpg",
"html": "\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.\/embed\/NWHfY_lvKIQ?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
"provider_url": "http:\/\/www.youtube.\/",
"thumbnail_width": 480,
"width": 480,
"thumbnail_height": 360,
"version": "1.0",
"type": "video"
}
You can read the full documentation at the oEmbed website. This API provides a standard way of accessing embedded content and it's supported by lots of popular services, here are just a few:
- YouTube
- Vimeo
- Flickr
- Hulu
- Deviantart
- WordPress
- MixCloud
- SoundCloud
Displaying the video correctly
oEmbed provides you with the width and height so you can simply set your width and height as required.
If your website is responsive then there are plugins to help maintain the aspect ratio when resizing as you suggested.
However, I prefer a pure CSS approach. You can use the width and height from oEmbed to do the following:
You can wrap the embed code in a containing div, make the iframe or object 100% width and height, and use another div inside your container to give the container height. The inner div will have a padding-top of say 60%, forcing the main container to have a height 60% of its width. You simply work out how much padding to use by calculating the height as a percentage of the width using the information from oEmbed.
Example HTML
<div class="video">
<span class="video-height"></span>
<iframe src="https://www.youtube./embed/NWHfY_lvKIQ" frameborder="0"> </iframe>
</div>
Example CSS
.video {
width: 50%;
position: relative;
}
.video > .video-height {
padding-top: 60%;
display: block;
}
iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
You can see a working example here: https://jsfiddle/k2eyty4f/3/ Resize the window to see how the height automatically adjusts as a percentage of the width.