Show Hide Elements

Show/Hide Elements Based On Video Watch Time using Elementor PRO

Irinel laptop m
Irinel Traista
The Wizzard
December 11, 2024

Adding Delayed Video Elements to Your WordPress Website with VideoJS and Elementor

Loading the VideoJS Library in Elementor

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