11

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!

CV-Gate
  • 1,162
  • 1
  • 10
  • 19
  • possible duplicate of [Shrink a Youtube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – davidcondrey Oct 04 '14 at 23:55

6 Answers6

17

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!

vsync
  • 118,978
  • 58
  • 307
  • 400
Will
  • 812
  • 1
  • 6
  • 13
  • Only numbers are allowed in "height" and "width". https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player – Marian07 Jul 12 '15 at 23:58
  • 1
    The documentation does say that these values are 'numbers' but the API is quite happy to take percentage values. – Will Jul 13 '15 at 14:00
  • 2
    You're right. In my case, they work only if they are in quotes. height: '100%', width: '100%' – Marian07 Jul 18 '15 at 20:48
  • Marian07 is correct -- I've edited my sample code to quote the heigh/width values. I looked in my own use other places and the YT API is quite happy to have numbers quoted as well. – Will Jul 20 '15 at 16:16
  • you must use double quotes or you will get an error. – vsync Sep 30 '15 at 22:52
  • 2
    @Marian07 the height at 100% isn't working. width is fine. any ideas? – apostleofzion Oct 19 '16 at 12:10
  • 1
    @apostleofzion the height 100% - I fixed by setting body, html style height to 100%. See https://stackoverflow.com/a/32384608/303612 – Dr. Andrew Burnett-Thompson Jul 29 '17 at 12:21
  • Does Stackoverflow have a "Life Saver" profile attribute? :) Thank you! – Luke Aug 29 '17 at 03:09
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

Sahil Ralkar
  • 2,331
  • 23
  • 25
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.

Kael
  • 71
  • 1
  • 2
1

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).

jswitchback
  • 141
  • 1
  • 2
  • Thanks for your comment, however I also tried with no size parameters and it doesn't work either. That's why I edited the post and removed that part of the code, to avoid confusion. – CV-Gate Apr 01 '14 at 23:29
0

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

CV-Gate
  • 1,162
  • 1
  • 10
  • 19
0

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

Bugs
  • 4,491
  • 9
  • 32
  • 41
user3099071
  • 1