Chromeless YouTube Player

Testing YouTube player without a chrome and adding a mask so that rolling over the video does not make the YT logo appear

by grammar

HTML

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player-wrapper">
    <div id="player"></div>
    <div id="mask"><span id="logo-cover"></span></div>
</div>

    <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '315',
          width: '560',
          videoId: '6IzipApOck0',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          },
          playerVars: {
            wmode: "transparent",
            controls: 0,
            modestbranding: 1,
            showinfo: 0,
            autoplay: 1
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {


        
            setTimeout( function() {
                $('#player-wrapper').fadeIn();
            }, 1000 );

      }

      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
      }
      function stopVideo() {

      }
        
    </script>

CSS

#mask {
    width: 560px;
    height: 315px;
    background: rgba( 0, 0, 0, 0 );
    position: absolute;
    top: 0px;
    left: 0px;
}

#logo-cover {
    width: 72px;
    height: 30px;
    background: white;
    position: absolute;
    top: 275px;
    right: 5px;
}

#player-wrapper {
    width: 640px;
    height: 390px;
    display: none;
}