Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #579160

    I have seen a few questions kind of beat around the bush asking about getting videos to autoplay in the lightbox once clicked, but haven’t found a solution.
    As an example, I have a cover photo image that links to a YouTube video at the top of this page http://www.bigboytravel.com/europe/germany/munich/freewalkingtour/ and would like to get it to autoplay once the lightbox pops up.

    Alternatively I can have it like this http://www.bigboytravel.com/asia/thailand/bangkok/chinese-new-year/, but I was trying to avoid having to have the page painfully load youtube every time instead of only when the visitor wants to watch the video.

    Hopefully with the examples my questions will make sense.
    Thanks a ton,
    Jon

    #579578

    Hi Jon!

    You would need to set the URL parameters in the magnific popup activation, you can either do this in the main Enfold js file (js/avia.js) or via a custom script in a child theme:

    function overwrite_magnificpopup(){
    ?>
    <script>
    (function($){
        $(window).load(function() {
        $('.video1').magnificPopup({
           items: {
              src: '<iframe width="560" height="315" src="https://www.youtube.com/embed/_ziUhNerFMI?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>',
              type: 'inline'
          }
        });
        });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'overwrite_magnificpopup');

    The link should then be:

    <a href='youtube_url' class='video1'>Link</a>
    

    Regards,
    Josue

    #579940

    Josue,

    Thanks a ton, looks like I had the wrong code in my child theme, but when I used the code you provided it crashed the site with an error code of Parse error: syntax error, unexpected ‘?’ in /home/content/p3pnexwpnas04_data01/96/2424396/html/wp-content/themes/enfold-child/functions.php on line 51

    Previously I had used the code:

    
    function change_magnific_popup_iframe_setting(){
    ?>
    <script>
    jQuery(window).load(function(){
    	jQuery('a[href*="youtube.com/watch"]').magnificPopup({
    	   type: 'iframe',
    	   iframe: {
    	     patterns: {
    	       youtube: {
    	       	index: 'youtube.com', 
    	       	id: 'v=', 
    	       	src: '//www.youtube.com/embed/%id%?rel=0&autoplay=1'
    	       }
    	     }
    	   }   
    	});      
    });
    </script>
    <?php
    }
    add_action("wp_footer", "change_magnific_popup_iframe_setting");
    #579942

    That code should’ve worked too, can you please create me a WordPress administrator account? post it here as a private reply.

    Best regards,
    Josue

    #584462

    Josue,

    Thanks a ton the plugin you recommend A.R. Video Embedded worked great on desktop, tablet and laptop.
    EX: http://www.bigboytravel.com/europe/germany/munich/oktoberfest/most-popular-songs/

    On mobile it wouldn’t autoplay when I click the cover/poster image for the video and required a second click. Because of this I had to use the standard YouTube coding with a custom CSS class to make it responsive while allowing rel=o instead. It’s not really ideal on mobile as I’d rather be able to have a custom cover/poster image show for each video so it can then lazy load the video with autoplay on click.
    Desktop is working great so far, but is there a way to do this on mobile too?

    Thanks again
    Jon

    #584657

    Hi Jon!

    I can’t really answer for a third-party plugin as it would be considered outside of our scope, you can create a topic in their public forums though:
    https://community.nextgenthemes.com/

    Cheers!
    Josue

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.