By: Irinel Tr
Reading time: 2 minute
Adding Delayed Video Elements to Your WordPress Website with VideoJS and Elementor
Loading the VideoJS Library in Elementor
- Step 1: Load the VideoJS library into Elementor using custom code.(JS & CSS)
https://cdnjs.com/libraries/video.js/7.21.2 - Step 2: Customize the appearance and behavior of video content using VideoJS.
Adding CSS for Styling
- Step 1: Carefully add CSS at the end of the body for accurate styling.
- Step 2: Add CSS to create a gradient border and center the play button.
Adding Video Content
- Step 1: Add video content to your website using VideoJS.
- Step 2: Customize the video player to match the gradient border.
Creating an Effective Display
- Step 1: Add a container, heading, and form to display the content effectively.
- Step 2: Set container width and adjust the heading to fit the content.
- Step 3: Customize and integrate the form to suit your needs.
Adding Delayed Video Element
- Step 1: Add a hidden element with a responsive class and JavaScript.
- Step 2: Reduce the container size to fit the element.
- Step 3: Copy and paste the JavaScript code to trigger element display after a specified delay.
- Step 4: Adjust the delay duration as per your requirements.
- Step 5: Enable or disable the progress bar in JavaScript to allow skipping forward and backward in the video.
HTML
<video
id="my-video"
class="video-js"
playsinline
controls
preload="auto"
width="1280"
height="720"
poster="/wp-content/uploads/2023/02/fitness-thumbnail.jpg"
data-setup='{"fluid": true}'
>
<source src="https://archive.org/download/Starry_Sky_Time_Lapse/Stars%20H264.mp4" name="" />
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a
web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank"
>supports HTML5 video</a
>
</p>
</video>
JS
<script>
jQuery(document).ready(function($) {
var triggertime = 3; //define time in seconds
var player = videojs('my-video', {
responsive: true
});
player.controlBar.progressControl.disable();
player.on('timeupdate', function() {
localStorage.savedTime = player.currentTime();
if (player.currentTime() >= triggertime) {
$('.dropelement').fadeIn();
}
}); //define the watched time in local storage
if (!localStorage.noFirstVisit) {
localStorage.noFirstVisit = "1"; //define the first visit
localStorage.savedTime = 0; //Define the default watched time
} else {
if (localStorage.savedTime >= triggertime){
$('.dropelement').fadeIn();
} else {
player.currentTime(localStorage.savedTime);
player.on('timeupdate', function() {
if (player.currentTime() >= triggertime) {
$('.dropelement').fadeIn();
}
});
}
}
});
</script>
CSS
.video-js .vjs-big-play-button {
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.video-js .vjs-tech, #my-video, .vjs-poster{
border-radius: 15px;
height:100%;
}
.vjs-poster{
height:100%;
background-size: cover!important;
background-position: top center!important;
}
.video-js .vjs-control-bar {
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
}Lazy doing it on your own?
Conclusion
In conclusion, leveraging the power of VideoJS, a HTML5 player framework, along with Elementor, you can enhance user engagement with video content on your WordPress website. By following the steps outlined in this article, you can easily customize the appearance and behavior of your video content and seamlessly integrate it with your website's design and forms. Take advantage of delayed video elements to provide an interactive and captivating experience for your users.
Share the article
Author: Irinel Tr
May I simply say what a comfort to discover someone that really knows what they are talking about on the internet. You actually realize how to bring an issue to light and make it important. More people must look at this and understand this side of the story. I cant believe you are not more popular since you surely have the gift.
Hi would you mind letting me know which web host you're utilizing?
I've loaded your blog in 3 completely different web browsers and I must
say this blog loads a lot faster then most. Can you suggest a good web
hosting provider at a honest price? Cheers, I appreciate it!
Cloudways.
https://irineltr.com/cloudways