1. Home
  2. /
  3. Web Design & Development
  4. /
  5. Web Development
  6. /
  7. How to load Vimeo or Youtube video on click and make play button centered-middle aligned over image placeholder?

How to load Vimeo or Youtube video on click and make play button centered-middle aligned over image placeholder?

Vimeo or Youtube video on click play

Displaying an image thumbnail as a placeholder on Vimeo or Youtube videos with a Play button centered and middle aligned on web pages is common nowadays. Doing so, helps in optimizing the webpage performance as we are not loading the video instantly but the video loads when the user clicks on the play button.

All the search engines are now preferring well optimized website pages in ranking as compared to the non-optimized ones. So, this has now become a trend where you must work on various optimization techniques to make sure your website pages are well optimized. There are several important parameters for optimization such as – CSS & JS, HTML, MySQL query, Image optimization, etc. including the website hosting performance, but in some cases they are not enough. Having pages with Videos that are loading on page load will make things worse and your website might add few more seconds in its total page loading time.

By using a placeholder image instead of loading the entire video on page load helps in reducing the page loading time and thus helping in performance optimization and boosting chances for ranking.

In this post, we are going to see a simple example of how to integrate Youtube or Vimeo videos on the page without loading it instantly. This example will show how we can make the videol load when the user interacts with the web page by clicking on the play button. Also, we will see how to center and middle align the youtube or vimeo play button on the image placeholder so that it auto adjusts on all screens.

Load Vimeo or Youtube Video on Click

Define a video link, if you’re going to use the same script on multiple pages. Otherwise, you can simply use the video URL in the below html code.

Declaration

This could be an array or link based upon the page or post or even coming from a Shortcode.

<?php
$video_link = 'https://player.vimeo.com/video/{your-video-id-goes-here}?autoplay=1&loop=1';
?>

HTML Code

<div class="video-block vshortcode">
	<div class="video-block-pos">
	  <img id="videoImagePlaceholder" src="{your-website-url}/images/video-placeholder.jpg" alt="Video Placeholder" data-video="<?=$video_link?>">
	  <div class="video-play" title="Click to Play Video"><div class="play-icon"><img src="{your-website-url}/images/video-play.svg" alt="play icon"/></div></div>
	</div>
</div>

JavaScript

Add the following Javascript to handle on click events.

<script>
jQuery('.video-play').click(function() {
  video = '<iframe id="welcomevideo"  class="responsive-iframe" frameborder="0" allow="autoplay; fullscreen" allowfullscreen title="Enter iframe title" src="' + jQuery('#videoImagePlaceholder').attr('data-video') + '"></iframe>';
  jQuery('.video-block-pos').replaceWith(video);
  jQuery('.video-block').addClass('video-iframe-container');
});
</script>

Display play icon or button centered or middle aligned over video placeholder

CSS

.video-block {
    position: relative;
    max-width: 100%;

    margin-bottom: 20px;
    margin-top:10px;
}
.video-block.video-iframe-container{
    height: 500px;
    margin-bottom: inherit;;
    margin-top:inherit;
}
.responsive-iframe, .video-block-pos {
    width: 100%;
    height: 100%;
    border: none;
    position: relative;
}
.video-block.video-iframe-container {
    padding-bottom: 20px;
}
.video-play {		   
    border-radius: 50%;	   
    text-align: center;		
    font-weight: bold;
    transition: all 0.3s ease;
    margin: -40px 0 0 -60px;
    left: calc(50% + 30px);
    top: calc(50% + 12px);							
    color: white;						  
    position: absolute;
    cursor: pointer;
    text-decoration: none;
}
.video-play:hover {
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0px 0px 10px rgb(255 255 255 / 50%);									   
}

DEMO

Video Placeholder
play icon

Leave a Reply

Reviews & Ratings Get your stoe online with Shopify in 60 minutes Shop Now