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.
Table of Contents
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>
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
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.
