Javascript – Embedding a Youtube/Vimeo video with the correct aspect ratio

csshtmljavascriptvideoyoutube

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.com/video/<?php echo $videoID; ?>?title=0&amp;byline=0&amp;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.com/

and you can achieve it with javascript as described on css-tricks:
–http://css-tricks.com/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

Best Answer

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.

Related Topic