Skip to content

Instantly share code, notes, and snippets.

@johnnyopao
Last active December 15, 2022 11:43
Show Gist options
  • Save johnnyopao/cb8aa1045dc854fb81aa to your computer and use it in GitHub Desktop.
Save johnnyopao/cb8aa1045dc854fb81aa to your computer and use it in GitHub Desktop.
Youtube Video Background for Unbounce pages - Minified

Youtube Video Background for Unbounce pages - Minified

See full instructions here: https://getsatisfaction.com/unbounce/topics/how-can-i-create-a-youtube-video-background

<script>
     
  // Youtube Video Background for Unbounce. V1.3.5
  
  // lpVideoBG('#SectionID', 'YoutubeVideoID', width, height, muted);
  // Use '#lp-pom-root' for a full page background
  
  lpVideoBG('#lp-pom-block-9', '2XX5zDThC3U', 560, 315, 0);
  
  function lpVideoBG(e,t,o,i,a){function n(){var t=$(e).width(),a=$(e).height();"#lp-pom-root"==e&&(a=$(window).height());var n=t/o,r=i*n;if(a>=r){var l=a/r;r=a*l}var p=r/i,c=o*p,y=(c-t)/2,u=(r-a)/2;$("#"+d)[0].setAttribute("height",r),$("#"+d)[0].setAttribute("width",c),$("#"+d).css({top:-u,left:-y,position:s})}var r=navigator.userAgent.match(/(Android|iPod|iPhone|iPad|iemobile|blackberry)/),d="framedVideo-"+e.substr(1),l=e,s="fixed";"#lp-pom-root"!==e&&(l=e+" .lp-pom-block-content",s="absolute"),$(l).css({width:"100%","margin-left":"0",overflow:"hidden"});var p="block";r&&(p="none");var c='<div style="height:100%;width:100%;position:absolute; top:0px"><iframe id="'+d+'" width="100%" height="100%" src="//www.youtube.com/embed/'+t+"?autoplay=1&controls=0&iv_load_policy=3&disablekb=1&fs=0&loop=1&modestbranding=1&rel=0&showinfo=0&playlist="+t+'&enablejsapi=1" frameborder="0" allowfullscreen style="display:'+p+'; visibility:hidden; "></iframe></div>',y='<div style="height:100%;width:100%;position:absolute; top:0px"></div>';"#lp-pom-root"===e?($(l).prepend(y),$(l).prepend(c)):($(l).append(c),$(l).append(y),$(e+"-color-overlay").appendTo(l)),n(),$(window).resize(function(){n()});var u=onPlayerReady;onPlayerReady=function(e){u(e),h.setLoop(!0),1==a&&e.target.mute()};var f=onChangedState;onChangedState=function(e){f(e),e.data==YT.PlayerState.PLAYING?document.getElementById(d).style.visibility="visible":e.data==YT.PlayerState.ENDED&&(document.getElementById(d).style.visibility="hidden")};var h,m=onYouTubeIframeAPIReady;onYouTubeIframeAPIReady=function(){m(),h=new YT.Player(d,{loop:"1",events:{onReady:onPlayerReady,onStateChange:onChangedState}})}}function onYouTubeIframeAPIReady(){}function onPlayerReady(){}function onChangedState(){}var tag=document.createElement("script");tag.src="//www.youtube.com/iframe_api";var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(tag,firstScriptTag);
  
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment