Embedding a Youtube/Vimeo video with the correct aspect ratio

Question

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

Answer 1

Getting 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.com/oembed?url=https://www.youtube.com/watch?v=NWHfY_lvKIQ

And you recieve a JSON response with the video dimensions (among other useful information).

Response example:

{
    "title": "Learning from StackOverflow.com", 
    "height": 270,
    "author_url": "http:\/\/www.youtube.com\/user\/GoogleTechTalks",
    "author_name": "GoogleTechTalks",
    "provider_name": "YouTube",
    "thumbnail_url": "http:\/\/i.ytimg.com\/vi\/NWHfY_lvKIQ\/hqdefault.jpg",
    "html": "\u003ciframe width=\"480\" height=\"270\" src=\"http:\/\/www.youtube.com\/embed\/NWHfY_lvKIQ?feature=oembed\" frameborder=\"0\" allowfullscreen\u003e\u003c\/iframe\u003e",
    "provider_url": "http:\/\/www.youtube.com\/",
    "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.com/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.net/k2eyty4f/3/ Resize the window to see how the height automatically adjusts as a percentage of the width.