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!