title: Remove black borders for a youtube embed
body: <p>I am trying to embed a youtube video on the background of my website. I have this working and it is responsive, except that when my embed video is widescreen (16:9) but my viewport is for example square (1:1), it creates black borders to compensate for the leftover space.</p>
  
  <p><img src="https://i.stack.imgur.com/hzDgr.jpg" alt="enter image description here"></p>
  
  <p>I was wondering if there was an option to crop the video so that the 'center' of the video is always in the screen, just like in the example image above. The leftover parts would be cut off. I think the CSS equivalent for images would be <code>background-size: cover;</code>.</p>
  
  <p>Here is the code I have at this moment. Try to make your viewport square and you will see the black borders. It's also available in a <a href="http://jsfiddle.net/rg3becj6/" rel="noreferrer">jsfiddle</a>.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;style&gt;
          body,html{ margin:0; padding:0; height:100%;}
  
          div.bg_utube {
              position: fixed;
              z-index: -99999;
              -webkit-user-select: none;
              user-select: none;
              width: 100%;
              height: 100%;
          }
          #player{
              position: absolute;
              top: 0px;
              left: 0px;
              width: 100%;
              height: 100%;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="bg_utube"&gt;
      &lt;div id="player"&gt;&lt;/div&gt;
      &lt;script&gt;
          var tag = document.createElement('script');
          tag.src = "http://www.youtube.com/player_api";
          var firstScriptTag = document.getElementsByTagName('script')[0];
          firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  
          var player;
          var video_id = 'JQ7a_8psCn0';
  
          function onYouTubePlayerAPIReady() {
              player = new YT.Player('player', {
                  height: '390',
                  width: '640',
                  videoId: video_id,
                  playerVars: {
                      'autoplay': 1,
                      'controls': 0,
                      'html5': 1,
                      'modestbranding': 1,
                      'showinfo': 0,
                      'related': 0},
  
                  events: {
                      'onReady': onPlayerReady,
                      'onStateChange': onPlayerStateChange
                  }
              });
          }
  
          function onPlayerReady(event) {
              event.target.playVideo();
              player.mute();
              event.target.setPlaybackQuality('hd720');
          }
  
          function onPlayerStateChange(event) {
  
              if (event.data == YT.PlayerState.PLAYING ) {
  
              }
  
              if(event.data === YT.PlayerState.ENDED){
                  player.loadVideoById(video_id);
              }
          }
      &lt;/script&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I did search on google for solutions but couldn't find any. Many were specifically for <code>&lt;object&gt;</code> and <code>&lt;embed&gt;</code>, using the old youtube embed style. I'm using the YouTube API to render a HTML5 player.</p>
  
  <p>Could someone give me a push in the right direction?</p>