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?

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

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. Hence, it’s important to know how to load Vimeo or YouTube video on click.

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.

Related: How to set up Goal Conversion tracking on Google Analytics (GA4) with Google Tag Manager

What is Vimeo Video?

Vimeo is a video hosting and sharing platform that allows users to upload, share, and view videos. It was founded in 2004 and has grown into a popular alternative to other video sharing platforms like YouTube. Vimeo is known for its high-quality video playback, customization options, and community of filmmakers and video professionals.

It offers a range of features and tools for video creators, including the ability to customize video players with logos, colors, and other branding elements. Vimeo also provides advanced privacy settings that allow users to control who can view their videos, as well as analytics that show how many views their videos are receiving.

Vimeo is commonly used by businesses, creatives, and professionals who want to showcase their work or promote their products and services. It’s also popular among independent filmmakers and videographers who use the platform to share their work and collaborate with other creatives.

Also read: Set up a landing page or an opt-in form with Convertkit to capture emails or leads

HTML Code to 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>

Related: Add Toggle Up and Down Arrows With CSS Transform and Transition in a Menu – WordPress Mobile Menu Toggle

Display Play Icon or Button Centered or Middle Aligned Over Video Placeholder

Here’re all the options to follow:

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

Update: 01/04/2022

.video-block.video-iframe-container{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
}
iframe.responsive-iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Also read: How to Use Custom Social Icons in a HubSpot Email Template?

How to Load Vimeo or Youtube Video on Click

Here’re the steps to load Vimeo or YouTube video on click:

Step 1: Create an Image Placeholder

The first step is to create an image placeholder for your video. This can be any image that you want to use as a preview for your video. It’s important to choose an image that is visually appealing and relevant to the content of your video.

Step 2: Get the Video Embed Code

The next step is to get the video embed code from Vimeo or YouTube. To do this, go to the video that you want to embed and look for the embed code. On Vimeo, you can find the embed code by clicking on the “Share” button and selecting “Embed.” On YouTube, you can find the embed code by clicking on the “Share” button and selecting “Embed.”

Step 3: Create the HTML Markup

Once you have the image placeholder and the video embed code, you can create the HTML markup for your video. Here’s an example:

<div class="video-wrapper">
  <img src="path-to-image.jpg" alt="Image Placeholder" />
  <div class="play-button"></div>
  <iframe src="https://player.vimeo.com/video/123456789?autoplay=1&loop=1" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>

In this example, we have a

element with a class of “video-wrapper” that contains the image placeholder, a play button, and an iframe with the video embed code. The play button is represented by a

element with a class of “play-button.”

Step 4: Style the Video Wrapper

The next step is to style the video wrapper using CSS. Here’s an example:

.video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.video-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-wrapper .play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  cursor: pointer;
}

.video-wrapper .play-button:before {
  content: "";
  position: absolute;
  top: 35%;
  left: 35%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 0 20px 30px;
  border-color: transparent transparent transparent #fff;
}

In this example, we’re using the “padding-bottom” technique to create a responsive video wrapper that maintains a 16:9 aspect ratio. We’re also positioning the image placeholder and the play button using absolute positioning and centering the play button using the “transform” property. Finally, we’re creating a play button using CSS and positioning it in the center of the video wrapper.

Step 5: Add the JavaScript

The final step is to add the JavaScript to make the video load on click. Here’s an example:

var wrapper = document.querySelector(".video-wrapper");
var playButton = wrapper.querySelector(".play-button");
var iframe = wrapper.querySelector("iframe");

playButton.addEventListener("click", function() {
  wrapper.classList.add("active");
  iframe.src += "&autoplay=1";
});

In this example, we’re using the querySelector method to select the video wrapper, play button, and iframe. We’re also adding an event listener to the play button that adds an “active” class to the video wrapper and loads the video by appending “&autoplay=1” to the iframe src.

Step 6: Customize as Needed

Finally, you can customize the video wrapper, play button, and CSS to match the design of your website. You can also modify the JavaScript to add additional functionality, such as pausing the video when the user clicks outside the video wrapper or changing the video source based on user input.

Related: How to Implement Infinite Pagination in WordPress?

Conclusion

In conclusion, adding Vimeo or YouTube videos to your website is a great way to engage your audience and provide valuable content. By following the steps outlined in this article, you can create a visually appealing and responsive video player that loads the video on click and features a centered-middle aligned play button over an image placeholder. This approach is perfect for websites that want to showcase video content without taking up too much space or distracting from other important website elements.

Remember to customize the CSS and JavaScript as needed to match your website design and add additional functionality. With a little bit of creativity, you can create a unique and engaging video player that will keep your audience coming back for more.

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