CodePen Embed - Optimization Techniques for Video Listing Pages

  <div class="row">
    <div class="column large-6 medium-6 small-12">
      <div class="iframe-video-wrapper" style="background-image:url('//img.youtube.com/vi/WEkSYw3o5is/hqdefault.jpg');" tabindex="0" >
      	<iframe class="iframe-video" data-iframe-src="https://www.youtube.com/embed/WEkSYw3o5is?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    	</div>
    </div>
    <div class="column large-6 medium-6 small-12">
      <div class="iframe-video-wrapper" style="background-image:url('//img.youtube.com/vi/hY7m5jjJ9mM/hqdefault.jpg');" tabindex="0" >
      	<iframe class="iframe-video" data-iframe-src="https://www.youtube.com/embed/hY7m5jjJ9mM?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    	</div>    
    </div>
    <div class="column large-6 medium-6 small-12">
      <div class="iframe-video-wrapper" style="background-image:url('//img.youtube.com/vi/N2z5dSRkv_I/hqdefault.jpg');" tabindex="0" >
      	<iframe class="iframe-video" data-iframe-src="https://www.youtube.com/embed/N2z5dSRkv_I?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    	</div>
    </div>
    <div class="column large-6 medium-6 small-12">
      <div class="iframe-video-wrapper" style="background-image:url('//img.youtube.com/vi/P7EB3Zxqj7g/hqdefault.jpg');" tabindex="0" >
      	<iframe class="iframe-video" data-iframe-src="https://www.youtube.com/embed/P7EB3Zxqj7g?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    	</div>
    </div>
    <div class="column large-6 medium-6 small-12">
      <div class="iframe-video-wrapper" style="background-image:url('//img.youtube.com/vi/CY7t8ow2gOM/hqdefault.jpg');" tabindex="0" >
      	<iframe class="iframe-video" data-iframe-src="https://www.youtube.com/embed/CY7t8ow2gOM?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    	</div>
    </div>
    <div class="column large-6 medium-6 small-12">
      <div class="iframe-video-wrapper" style="background-image:url('//img.youtube.com/vi/pOmu0LtcI6Y/hqdefault.jpg');" tabindex="0" >
      	<iframe class="iframe-video" data-iframe-src="https://www.youtube.com/embed/pOmu0LtcI6Y?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    	</div>
    </div>
    <div class="column large-6 medium-6 small-12">
      <div class="iframe-video-wrapper" style="background-image:url('//img.youtube.com/vi/X1CuTNPwur0/hqdefault.jpg');" tabindex="0" >
      	<iframe class="iframe-video" data-iframe-src="https://www.youtube.com/embed/X1CuTNPwur0?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    	</div>
    </div>
    <div class="column large-6 medium-6 small-12">
      <div class="iframe-video-wrapper" style="background-image:url('//img.youtube.com/vi/Rmx1JGTX1yw/hqdefault.jpg');" tabindex="0" >
      	<iframe class="iframe-video" data-iframe-src="https://www.youtube.com/embed/Rmx1JGTX1yw?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    	</div>
    </div>
  </div>

.iframe-video-wrapper {
		background-size: cover;
    background-position: center center;
    cursor: pointer;
    position:relative;
    width:100%;
    padding-bottom: 56.25%;
    //padding-top: 25px;
    height: 0;
    border:none;
		//background-color: $liberal-light-grey-color;
		margin-bottom:2rem;
		&:hover,
		&:focus {
			&:before {
				background-color:#ff0000;
			}
		}
    &:before {
	    content: "";
	    font-family: "FontAwesome";
	    font-size: 28px;
	    line-height: 1rem;
	    position: absolute;
      right: calc(50% + 0.6rem);
      box-sizing: content-box;
      top: calc(50% - 1.6rem);
      transform: translate(50%);
      transition: color 200ms;
      color: rgba(255, 255, 255, 0.8);
      padding: 1.4rem 2rem;
      transition: all 0.15s ease-in-out;
      /* height: 50px; */
      /* width: 90px; */
      background-color: rgba(0,0,0,0.8);
      border-radius: 27%;
      display: block;
 	
    }
	}
	.iframe-video {
		position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    &.displayed {
    	width: 100%;
    	height: 100%;
    }
	}

View Compiled

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  time_doc_ready = Date.now();
  console.log("document is ready");
  
  jQuery('.iframe-video-wrapper').on('click keypress', function(e){
    if (e.type == "keypress" && e.keyCode != 13) {
      return;
    }

    var $target = $(this);
    var $iframe = $target.find('iframe');
    $iframe.attr('src', $iframe.data('iframe-src') );
    $iframe.addClass('displayed');
  }); 
  
});

This Pen is owned by Steve Puddick on CodePen. It is a fork of this Pen.

See more by @stevepuddick on CodePen

External CSS

External JavaScript

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js