Stack Overflow
stackoverflow.com › questions › 57864142 › how-to-play-video-automatically-for-magnific-popup
jquery - How to play video automatically for Magnific Popup - Stack Overflow
function magnificPopupFn() { $('.popup-vimeo').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: true, closeOnContentClick: false, closeBtnInside: true, closeOnBgClick: true, callbacks: { open: function() { $('html').css('margin-right', 0); $('body').addClass('noscroll'); $('iframe').attr('allow', 'autoplay'); }, close: function() { $('body').removeClass('noscroll'); }, } }); } magnificPopupFn();
GitHub
github.com › dimsemenov › Magnific-Popup › issues › 1123
youtube link on magnific popup is not autoplaying · Issue #1123 · dimsemenov/Magnific-Popup
May 24, 2019 - I tried with different options for autoplay. Any help would be much appreciated! This is the link · <a href="https://www.youtube.com/watch?v=8Shndkrgc88" class="video" > With this script · $('.popup-gallery').magnificPopup({ delegate: 'a', type: 'image', callbacks: { elementParse: function(item) { // Function will fire for each target element // "item.el" is a target DOM element (if present) // "item.src" is a source that you may modify // console.log(item.el.context.className); if(item.el[0].className == 'video') { item.type = 'iframe', item.iframe = { patterns: { youtube: { index: 'youtube
Author vdotm
Using Magnific Popup plugin for video & getting strange results
Hi! I’m trying to use the built-in Magnific script to pop up a video, as per this post/thread: http://forum.wpbeaverbuilder.com/support/q/video-lightbox/#post-35343 In my HTML module I have this: jQuery( function(){ jQuery( '#fl-homepage-video' ).magnificPopup({ type: 'iframe', mainClass: ... More on community.wpbeaverbuilder.com
0
0
August 25, 2015Autoplay lightbox video popup instead of waiting for click – Okler Themes
Hello, I am trying to make the video autoplay when the page is loaded instead of waiting for the user to click the button in here: http://akilliguvenli.com/shortcodes-lightboxes.html How can I do that? ... Open Video ... $('#openVideo').magnificPopup... More on okler.net
Open video (Magnific Popup) with setTimeout and autoplay
The code below opens a YouTube video after 5 seconds (perfectly). But I can't make the video play automatically. More on github.com
1
April 16, 2020Rel=0 and autoplay=1 in YouTube embed player in magnific popup not working
I'm having problems with having ... in a magnific popup. It seems like it is only the first parameter in the url that is working, and i have tried all these versions: ?rel=0&autoplay=1 ?rel=0&autoplay=1 ?rel=0?autoplay=1 · None of them are working. But if I move autoplay=1 up as the first parameter, then the autoplay works fine - but then the rel=0 doesn't. Here's my code. ... .video1 { ... More on stackoverflow.com
Dimsemenov
dimsemenov.com › plugins › magnific-popup › documentation.html
Magnific Popup Documentation
The complete guide on how to use Magnific Popup - the open source responsive lightbox plugin.
CodePen
codepen.io › marimoman › pen › xxxEYXx
magnific popup youtube autoplay
$('.popup').magnificPopup({ type: 'iframe', mainClass: 'mfp-fade', removalDelay: 400, preloader: false, iframe: { patterns: { youtube: { index: 'youtube.com', id: 'v=', src: 'https://www.youtube.com/embed/%id%?rel=0&autoplay=1' } } }, });
Beaver Builder
community.wpbeaverbuilder.com › beaver builder
Using Magnific Popup plugin for video & getting strange results - Beaver Builder - Beaver Builder Community Forum
August 25, 2015 - Hi! I’m trying to use the built-in Magnific script to pop up a video, as per this post/thread: http://forum.wpbeaverbuilder.com/support/q/video-lightbox/#post-35343 In my HTML module I have this: jQuery( function(){ jQuery( '#fl-homepage-video' ).magnificPopup({ type: 'iframe', mainClass: 'mfp-fa...
Kriesi
kriesi.at › home › topics › enfold › autoplay youtube videos in lightbox on click
Autoplay Youtube Videos In Lightbox On Click - Support | Kriesi.at - Premium WordPress Themes
February 7, 2016 - 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");
Okler
okler.net › forums › topic › autoplay-lightbox-video-popup-instead-of-waiting-for-click
Autoplay lightbox video popup instead of waiting for click – Okler Themes
March 2, 2016 - Hello, I am trying to make the video autoplay when the page is loaded instead of waiting for the user to click the button in here: http://akilliguvenli.com/shortcodes-lightboxes.html How can I do that? ... <a href="#video-01" id="openVideo">Open Video</a> <div id="video-01" class="white-popup-block mfp-hide"> <video controls preload="auto" width="100%" height="100%"> <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"> </video> </div> ... $('#openVideo').magnificPopup({ type: 'inline', callbacks: { open: function() { $('html').css('margin-right', 0); $(this.content).find('video')[0].play(); }, close: function() { $(this.content).find('video')[0].load(); } } });
GitHub
gist.github.com › bulbul84 › 902f742cceace441e258693dcef62ba9
Magnific Popup Vimeo Video Autoplay with sound in Google Chrome Browser · GitHub
Magnific Popup Vimeo Video Autoplay with sound in Google Chrome Browser - index.html
GitHub
github.com › dimsemenov › Magnific-Popup › issues › 1145
Open video (Magnific Popup) with setTimeout and autoplay · Issue #1145 · dimsemenov/Magnific-Popup
April 16, 2020 - The code below opens a YouTube video after 5 seconds (perfectly). But I can't make the video play automatically. <script type="text/javascript"> setTimeout(function(){ $.magnificPopup.open({ items: { src: 'http://www.youtube.com/watch?v=VZWMLKxV9xo?autoplay=1&rel=0' }, type: 'iframe', preloader: true }); }, 5000); </script>
Author juscelinobarao
Top answer 1 of 2
4
Old post but this may help someone:
The issue is that the script is adding the autoplay for you with the ? so if you have something like your example:
https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1
it is rendered as:
https://www.youtube.com/watch?v=_ziUhNerFMI?rel=0&autoplay=1?autoplay=1
which causes it to error out. you can modify the magnific script and remove this, search for this line:
www.youtube.com/embed/%id%?autoplay=1
and replace with this:
www.youtube.com/embed/%id%
2 of 2
0
This seems to work just fine:
jQuery(document).ready(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'
}
});
});.video1 {
background-image: url('http://placehold.it/180x180');
background-repeat: no-repeat;
background-size: contain;
height: 180px;
width: 180px;
display: block;
outline: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.0.0/jquery.magnific-popup.min.js"></script>
<a class="video1" href="https://www.youtube.com/watch?v=_ziUhNerFMI"></a>GitHub
gist.github.com › muneesmmw › 1a6db8ee5bb81f2eba86b87b440a6504
magnific popup youtube autoplay · GitHub
magnific popup youtube autoplay. GitHub Gist: instantly share code, notes, and snippets.
Lightrun
lightrun.com › answers › dimsemenov-magnific-popup-youtube-link-on-magnific-popup-is-not-autoplaying
youtube link on magnific popup is not autoplaying
Add “&rel=0” to popup YouTube videos - WordPress.org · js to hard code that query parameter. So you look for “//www.youtube.com/embed/%id%?autoplay=1” and simply add the “&rel=0” ...Read more > ... Magnific Popup core CSS file --> ...
Popup Maker
docs.wppopupmaker.com › article › 86-start-video-when-the-popup-opens
Start Video When The Popup Opens - Popup Maker
Note: Replace the example popup ID (123) with your popup’s ID number. Learn how to find the popup ID. jQuery('#pum-123') .on('pumBeforeOpen', function () { var $iframe = jQuery('iframe', jQuery(this)), src = $iframe.prop('src'); $iframe.prop('src', '').prop('src', src + '?autoplay=1'); });
Published December 23, 2024
CodePen
codepen.io › meladq › pen › CLqtk
Magnific Popup - Youtube
$('.button').magnificPopup({ items: { src: 'https://www.youtube.com/watch?v=7eo8XpT4CmM' }, type: 'iframe', iframe: { markup: '<div class="mfp-iframe-scaler">'+ '<div class="mfp-close"></div>'+ '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ '</div>', patterns: { youtube: { index: 'youtube.com/', id: 'v=', src: '//www.youtube.com/embed/%id%?autoplay=1' } }, srcAction: 'iframe_src', } }); !
CodePen
codepen.io › townivan › pen › EVGKEq
magnific-popup example
<a class="video" href="https://vimeo.com/53588182?autoplay=1">Gravity Light 1.0 video</a> <br><br> <a class="video" href="https://vimeo.com/128164082?autoplay=1">Gravity Light 2.0 video</a> <p>Notice that when using a keyboard, focus is back where to left off. :) </p> ... $('.video').magnificPopup({ type: 'iframe', disableOn: function() { // don't use a popup for mobile if( $(window).width() < 600 ) { return false; } return true; }, iframe: { markup: '<div class="mfp-iframe-scaler">'+ '<div class="mfp-close"></div>'+ '<iframe class="mfp-iframe" frameborder="0" allowfullscreen></iframe>'+ '</div>', // HTML markup of popup, `mfp-close` will be replaced by the close button patterns: { youtube: { index: 'youtube.com/', // String that detects type of video (in this case YouTube).
GitHub
github.com › dimsemenov › Magnific-Popup › issues › 1111
Video popup iframe needs mute=1 added to vimeo and youtube to allow auto play · Issue #1111 · dimsemenov/Magnific-Popup
February 28, 2019 - Recently chrome made some changes where unmuted videos will not auto play. The iframe src for both youtube and vimeo needs to be updated to the following to allow auto play again. //www.youtube.com/embed/%id%?autoplay=1&mute=1 //player.v...
Author atrzyna
Blogger
cheatortrick.blogspot.com › 2019 › 05 › chrome-youtube-iframe-magnific-popup.html
Chrome youtube iframe magnific popup autoplay
May 6, 2019 - $('.js-popup-video').magnificPopup({ type: 'iframe', iframe: { patterns: { youtube: { index: 'youtube.com/', id: function (url) { return url }, src: '%id%' }, vimeo: { index: 'vimeo.com/', id: function (url) { return url }, src: '%id%' } } } }); iPhone again not work https://stackoverflow.com/questions/8141652/youtube-embedded-video-autoplay-feature-not-working-in-iphone/8142187#8142187 Many new policy make auto play as a threat.
Digital Point
forums.digitalpoint.com › threads › magnific-popup-to-play-video.2715912
Magnific Popup to play video...
April 13, 2014 - Hi. I am using a script that can upload embedded video to the site. It uses the magnific-popup JS. However, it will only upload from YouTube and...
GitHub
github.com › dimsemenov › Magnific-Popup › issues › 600
How to get vimeo video to autoplay · Issue #600 · dimsemenov/Magnific-Popup
December 19, 2014 - <a id="vimeo" class="play-button popup-vimeo" href="https://vimeo.com/90863895?autoplay=1">Get to know us </a> $('.popup-vimeo').magnificPopup({ disableOn: 700, type: 'iframe', mainClass: 'mfp-fade', removalDelay: 160, preloader: false, fixedContentPos: false }); Additionally, here is the link to test site: http://olivecare.co.uk/olivecareonepage/index.html ·
Author fluxxus
Muffingroup
forum.muffingroup.com › betheme › discussion › 28882 › magnific-popup
Magnific Popup — Betheme Support Forum
May 31, 2017 - "How can i set the autoplay of the video? adding ?&autoplay=1 the video start playing in the background instead starting in the lighbox" ... So I think, if you don't find any solution, to go back to PrettyPhoto lightbox.... as I wrote before: "Please tell me how go back to Pretty photo.... ...