title: YouTube iframe API: can't make it responsive
body: <p>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.</p>
  
  <p>Everything is working fine as explained in the docs, I'm calling the video like this:</p>
  
  <pre><code>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
          }
      });
  }
  </code></pre>
  
  <p>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: </p>
  
  <pre><code>.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%;
  }
  </code></pre>
  
  <p>And this with JavaScript: <a href="http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php">http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php</a> </p>
  
  <p>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.</p>
  
  <p>Any idea?</p>
  
  <p>Thanks!</p>