<div id="player"></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: '300',
         width: '400',
         videoId: 'WFAMJf6vBz8',
         controls: 1,
         events: {
             'onReady': onPlayerReady,
             'onStateChange': onPlayerStateChange,
         }
     });
 
     // 4. The API will call this function when the video player is ready.
     function onPlayerReady(event) {
         event.target.setVolume(0);
         event.target.playVideo();
         videoFrame = document.getElementById('player');
         videoFrame.addEventListener('mouseover', function() {
             event.target.unMute();
             event.target.setVolume(50);
         });
         videoFrame.addEventListener('mouseout', function() {
             event.target.setVolume(0);
             event.target.mute();
         });
     }
     // 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) {
         if (event.data == YT.PlayerState.PLAYING && !done) {
             //      setTimeout(stopVideo, 6000);
             done = true;
         }
         event.target.setVolume(0);
     }
 }
</script>