video responsive embed

In this example below you will see how to do a video responsive embed with some HTML / CSS and Javascript

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>video responsive embed</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>
<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="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/agustibr/video-responsive-embed-jweYQo */
#hero-video-img {
  position: relative;
  padding: 0 0 56.25% 0;
  height: 0;
  overflow: hidden;
  background: black;
}
#hero-video-img #video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#hero-video-img #img-container {
  z-index: 2;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: transparent;
}
#hero-video-img #img-container .last-frame {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: black;
  opacity: 1;
}
#hero-video-img #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;
}
#hero-video-img #img-container .transparent {
  opacity: 0;
}


/*Downloaded from https://www.codeseek.co/agustibr/video-responsive-embed-jweYQo */
var player;
// https://developers.google.com/youtube/player_parameters
var playerParameters = {
  modestbranding: 1,
  autoplay: 1,
  autohide: 1,
  rel: 0,
  showinfo: 0,
  controls: 0,
  disablekb: 1,
  enablejsapi: 1,
  iv_load_policy: 3
};
// create youtube player
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function onYouTubePlayerAPIReady() {
  var ytid = $("#hero-video-img").data("ytid");
  var imgurl = $("#hero-video-img").data("imgurl");
  $("#hero-video-img").html(
    '<div id="video-container"></div> <div id="img-container"><div class="last-frame transparent"></div><div class="fadein-frame transparent"></div></div>'
  );
  $("#img-container .fadein-frame").css(
    "background-image",
    "url(" + imgurl + ")"
  );

  player = new YT.Player("video-container", {
    suggestedQuality: "highres",
    events: {
      onReady: onPlayerReady,
      onStateChange: onPlayerStateChange
    },
    videoId: ytid,
    playerVars: playerParameters
  });
}

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

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

Comments