Embedded Video with Placeholder Image

In this example below you will see how to do a Embedded Video with Placeholder Image with some HTML / CSS and Javascript

Creates a full-width embedded video with a placeholder image and a play button. When either the image or button are clicked, an iframe is loaded in, along with a close button.

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>Embedded Video with Placeholder Image</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <header class="header">
  <h1 class="header__title">Embedded Video with Placeholder Image</h1>
  <a href="https://codepen.io/praliedutzel/post/full-width-embedded-videos-with-placeholder-images" target="_blank">Read the Article</a>
</header>

<section class="video">
  <img src="http://placehold.it/350x150" data-video="https://www.youtube.com/embed/q3Dt6kI-ajA?autoplay=1" title="Play Video" class="video__placeholder" />
  <button class="video__button"></button>
</section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/praliedutzel/embedded-video-with-placeholder-image-gbJzL */
.video {
  height: 50vh;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.video__placeholder {
  min-width: 100%;
  display: block;
}

.video__button {
  background: transparent;
  width: 100px;
  height: 100px;
  top: 50%;
  left: 50%;
  position: absolute;
  display: block;
  border: 3px solid #232439;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%) translateY(-50%);
}
.video__button:before, .video__button:after {
  content: "";
  position: absolute;
  display: block;
  background-color: #232439;
  width: 35px;
  height: 3px;
  top: 50%;
  left: 35%;
  transition: background-color 0.3s;
}
.video__button:before {
  transform: translateY(-11px) rotate(45deg);
}
.video__button:after {
  transform: translateY(11px) rotate(-45deg);
}
.video__button.is-playing {
  top: 1rem;
  right: 1rem;
  left: auto;
  transform: none;
}
.video__button.is-playing:before, .video__button.is-playing:after {
  left: 32%;
}
.video__button.is-playing:before {
  transform: translateY(0) rotate(45deg);
}
.video__button.is-playing:after {
  transform: translateY(0) rotate(-45deg);
}

.video:hover .video__button {
  border-color: #6ddce5;
}
.video:hover .video__button:before, .video:hover .video__button:after {
  background-color: #6ddce5;
}

#video-player {
  width: 100%;
  height: 50vh;
  top: 0;
  left: 0;
  position: absolute;
  display: block;
}

body {
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
  font-family: "Open Sans", Helvetica Neue, Helvetica, Arial, sans-serif;
  text-align: center;
}

.header {
  background-color: #232439;
  padding: 4rem 2rem;
  text-align: center;
}
.header a {
  margin-top: 1rem;
  display: block;
  color: #6ddce5;
  font-size: 0.85rem;
  text-decoration: none;
}

.header__title {
  margin: 0;
  color: #fff;
  font-weight: 300;
}


/*Downloaded from https://www.codeseek.co/praliedutzel/embedded-video-with-placeholder-image-gbJzL */
$('.video__placeholder, .video__button').on('click', function() {
  if ( !$('#video-player').length ) {
    var video = '<iframe id="video-player" src="' + $('.video__placeholder').attr('data-video') + '" frameborder="0" allowfullscreen wmode="opaque"></iframe>';
    $(video).insertAfter( $('.video__placeholder') );
    $('.video__button').addClass('is-playing');
  } else {
    $('.video__button').removeClass('is-playing');
    $('#video-player').remove();
  }
});

Comments