How to enable autoplay, mute and loop using jQuery

JS Code Snippets/Functions

Requirements:

  • Jquery
  • Javascript
  • CSS

Step 1: Go to your js file and copy the code below


(function($){
    function autoplay_oembed(){

          // Select the video iframe using the provided selector
          var videoIframe = $(".video-player iframe");
         
          // Check if the iframe element exists on the page
          if (videoIframe.length > 0) {
            // Get the current video URL
            var currentURL = videoIframe.attr("src");
         
            // New values for autoPlay and muted
            var newAutoPlay = 1;
            var newMuted = 1;
         
            // Function to update URL parameters
            function updateURLParameters(url, params) {
              for (var key in params) {
                url = url.replace(new RegExp(key + "=\\d", "i"), key + "=" + params[key]);
              }
              return url;
            }
         
            // Update the URL
            var updatedURL = updateURLParameters(currentURL, { "autoPlay": newAutoPlay, "muted": newMuted, "loop": 1  });
         
            // Update the iframe's src attribute with the modified URL
            videoIframe.attr("src", updatedURL);
          } else {
            // console.error("Video iframe not found.");
          }

    }

    // Function Call
    $(document).ready(function () {

        autoplay_oembed();

    });
})(jQuery);

Step 2: Change the selector on this “$(“.video-player iframe”);” to your iframes selector

Step 3: Save your file and check your changes on the front-end

That’s all for this tutorial, if you have any questions, contact the support.

Leave a Reply

Your email address will not be published. Required fields are marked *