ccc

API YouTube: meter un vídeo de YouTube como background y sin que salgan los controles

HTML:
<script src="https://www.youtube.com/player_api"></script>
<div id="myid"></div>
<div id="player"></div>

CSS:
#player {width: 100%; height: 100%; position: fixed; z-index: -99;}
#myid {background: rgba(0,0,0,.1); width: 100%; height: 100%; position: fixed; z-index: 1;}
iframe .html5-video-player .html5-watermark {display: none !important;}

JS:
var player;
function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        playerVars: {
            'autoplay': 1,
            'controls': 0,
            'autohide': 1,
            'wmode': 'opaque',
            'showinfo': 0,
            'loop': 1,
            'mute': 1,
'modestbranding': 1,
            //'start': 15,
            //'end': 110,
            'playlist': 'PNmJBaAOiZM'
        },
        videoId: 'PNmJBaAOiZM',
        events: {
            'onReady': onPlayerReady
        }
    });

}

function onPlayerReady(event) {
    event.target.mute();
    $('#text').fadeIn(400);
    //why this? Well, if you want to overlay text on top of your video, you
    //will have to fade it in once your video has loaded in order for this
    //to work in Safari, or your will get an origin error.
}

//this pauses the video when it's out of view, just wrap your video in .m-//video
$(window).scroll(function() {
   var hT = $('.m-video').height(),
       wS = $(this).scrollTop();
   if (wS > hT) {
      player.pauseVideo();
   }
   else {
      player.playVideo();
   }
});

Más información en: https://codepen.io/fecoder/pen/azZYOV

Especial agradecimiento a Vicky Marín

No hay comentarios:

Publicar un comentario