Tagged: , , , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 7, 2016 at 11:13 am #579160
    millertimesites

    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

    February 8, 2016 at 1:28 pm #579578
    Josue

    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

    February 8, 2016 at 10:42 pm #579940
    millertimesites

    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");
    February 8, 2016 at 10:45 pm #579942
    Josue

    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

    February 17, 2016 at 5:33 am #584462
    millertimesites

    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

    February 17, 2016 at 12:57 pm #584657
    Josue

    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

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