Skip to content

Instantly share code, notes, and snippets.

@guih
Last active August 29, 2015 14:26
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save guih/8d2751e2ca2a1b5fe981 to your computer and use it in GitHub Desktop.
Save guih/8d2751e2ca2a1b5fe981 to your computer and use it in GitHub Desktop.
LandingPage Video Background
<script type="text/javascript">
var bg_container = '\
<div id="bg_container">\
<iframe src="//www.youtube.com/embed/XhzfQbGfmQ?autoplay=1&controls=0&loop=1&showinfo=0&modestbranding=1&disablekb=1&enablejsapi=1&muted=true" frameborder="0" width="100%" height="100%"></iframe>\
</div>';
// Escolher um dos 3 abaixo adicionando ou removendo o // da frente
$('body').append(bg_container);
// $('#featured-content .container').append(bg_container);
// $('#container section').append(bg_container);
</script>
#bg_container { position: absolute; top: 0px; z-index: -99; width: 100%; height: 100% }
#featured-content { background: transparent; }
#featured-content #conversion { background: transparent; }
#featured-content > .container { position: relative; }
#container section { background: transparent; box-shadow: none; position: relative; }
#conversion { box-shadow: none; }
<script type="text/javascript">
var bg_container = '<div id="bg_container"></div>';
// Escolher um dos 3 abaixo adicionando ou removendo o // da frente
$('body').append(bg_container);
// $('#featured-content .container').append(bg_container);
// $('#container section').append(bg_container);
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() {
player = new YT.Player('bg_container', {
height: '100%',
width: '100%',
videoId: 'XhzfQbGfmQ',
playerVars: { 'controls': 0, 'showinfo' : 0, 'modestbranding' : 1, 'disablekb' : 1 },
events: {
'onReady': onPlayerReady,
'onStateChange' : onStateChange
}
});
}
function onPlayerReady() {
player.mute();
player.setLoop(true);
player.playVideo();
}
function onStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.playVideo();
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment