YouTube iframe API: can't make it responsive

Question

I'm trying to implement a Youtube video via the iFrame API. I need to catch some events so embedding the player alone is not an option.

Everything is working fine as explained in the docs, I'm calling the video like this:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
if($("#video_1").length){
    player = new YT.Player('video_1', {
        videoId: 'BmsPsdVmkSw',
        playerVars: { 'autoplay': 1, 'controls': 0, 'info': 0, 'rel': 0, 'wmode': 'transparent' },
        events: {
            'onStateChange': goToVS
        }
    });
}

The problem is that I need to make the video adapt to the screen width to look good on phones and tablets, but after trying things like this with CSS:

.video-container { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; 
    overflow: hidden; 
} 
.video-container iframe, .video-container object, .video-container embed { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
}

And this with JavaScript: http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

I can't make it work. Any of the tricks before work fine on a normal Youtube embed code but they don't with the iframe API.

Any idea?

Thanks!

Answer 1

I've made this work myself a few days ago, project is currently pw-protected unfortunately or I'd share the URL.

It would help if you'd include the HTML you are using because I suspect that's where your problem is. The responsive end of this can be pure CSS; based on javascript/css, it should be something like this:

<div class=video-container>
    <div id=video_1></div>
</div>

The problem that is easy to run into is that YT.Player replaces the named div with an iframe rather than inserting an iframe into that div.
also, in your YT.Player call I'd include height/width 100% calls, eg

new YT.Player('video_1', {
    videoId: 'BmsPsdVmkSw',
    height: "100%",
    width: "100%"

but that may be unnecessary given the css definition you've already made.

Good luck!

Answer 2

Set the height and width to 100% And use your css to set responsive

----------------On Html ----------------------

<div id="ytplayer1" class"[your-class-name]">

----------------On CSS ----------------------
.[your-class-name] {width:100%;height:400px;}

@media screen and (max-width: 450px) {
   .[your-class-name] {width:100%;height:180px;}
}

@media screen and (max-width: 768px) {
   .[your-class-name] {width:100%;height:325px;}
}

----------------On Javascript ----------------------
player1 = new YT.Player('ytplayer1', {
          height: '100%',
          width: '100%',
          playerVars: {
          enablejsapi: 1,
          showinfo: '1',
          autoplay: '0'
          },
          events: {
            'onReady': onPlayerReady1
          }
        });

In youtube api, width: 100% is work, but in height must set in px or other, so you need set up the div.

This is an example.

Answer 3

I solve the responsiveness with the following CSS

.video-container {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

added 'video-container' class to the parent of the iframe tag

Answer 4

Your setting the width and height of the iframe (1280x720). There can not be fixed pixel sizes on the iframe. The '.video-container iframe' CSS is what sets the width and height (100% x 100%, ie fluid).

Answer 5

You can use player.setSize() to update the player size after the player object has been created.

https://developers.google.com/youtube/iframe_api_reference#Playback_controls

Answer 6

Finally I could figure it out. I resized the video through JavaScript but after the readyEvent was fired.