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.

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 ©


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

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



  <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>

<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>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>


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



/*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') );
  } else {