A Pen by Agusti BR

Thumbnail
This awesome code was written by agustibr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright agustibr ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Agusti BR</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div data-imgurl='http://www.gapposlegacy.com/wordpress/wp-content/uploads/2017/05/Fondo_Web.jpg' data-ytid='HXUwB3NY19w' id='hero-video-img'>
  <div id='video-container'>
    <div id='player'></div>
  </div>
  <div id='img-container'>
    <div class='last-frame transparent'></div>
    <div class='fadein-frame transparent'></div>
  </div>
</div>
<div class='section'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, asperiores inventore doloremque a suscipit consequuntur labore animi voluptate eius dolorem ea ad qui quibusdam. Nulla temporibus corporis dolorum in omnis.</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://www.youtube.com/player_api'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/agustibr/a-pen-by-agusti-br-RgYMYo */
.hide {
  display: none;
}

body {
  padding: 1rem 0;
}

#hero-video-img {
  position: relative;
  width: 100%;
  background: pink;
}

#video-container {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
}

#img-container {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
}
#img-container .last-frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: black;
  opacity: 1;
}
#img-container .fadein-frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  right: 0;
  bottom: 0;
  background: black no-repeat center center;
  background-size: cover;
  opacity: 1;
  transition: opacity 1s ease-in-out;
}
#img-container .transparent {
  opacity: 0;
}


/*Downloaded from https://www.codeseek.co/agustibr/a-pen-by-agusti-br-RgYMYo */
var player;
var playerDefaults = {autoplay: 1, autohide: 1, modestbranding: 0, rel: 0, showinfo: 0, controls: 0, disablekb: 1, enablejsapi: 0, iv_load_policy: 3};
// create youtube player
console.log("hi!");
function onYouTubePlayerAPIReady() {
  var ytid = $('#hero-video-img').data('ytid');
  var imgurl = $('#hero-video-img').data('imgurl');
  console.log("player:"+ ytid + ', '+ imgurl);
  $('#img-container .fadein-frame').css('background-image', 'url(' + imgurl + ')');
  player = new YT.Player("video-container", {
    height: "315",
    width: "560",
    videoId: ytid,
    suggestedQuality: "highres",
    playerVars: playerDefaults,
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange
    }
  });
}

// autoplay video
function onPlayerReady(event) {
  event.target.playVideo();
}

// when video ends
function onPlayerStateChange(event) {
  if (event.data === 0) {
    console.log("show img");
    $(".last-frame, .fadein-frame").removeClass("transparent");
  }
}

function vidRescale(){

  var w = $(window).width()+200,
    h = $(window).height()+200;

  if (w/h > 16/9){
    player.setSize(w, w/16*9);
    $('#hero-video-img #video-container').css({'left': '0px'});
  } else {
    player.setSize(h/9*16, h);
    $('#hero-video-img #video-container').css({'left': -($('#hero-video-img #video-container').outerWidth()-w)/2});
  }
}

$(window).on('load resize', function(){
  //vidRescale();
});

Comments