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 - On clicking the link the popup shows up with video - but does not autoplay it. Plays only on clicking again the popped up youtube button. I tried with different options for autoplay. Any help would be much appreciated! ... $('.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 = { patter
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
Autoplay 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
Rel=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
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");
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...
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
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
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
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>
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
gist.github.com › muneesmmw › 1a6db8ee5bb81f2eba86b87b440a6504
magnific popup youtube autoplay · GitHub
magnific popup youtube autoplay. GitHub Gist: instantly share code, notes, and snippets.
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', } }); !
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...
Top answer 1 of 4
51
Check the following link for documentation:
Doc
$(document).ready(function() {
$('.popup-youtube, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>
Hope this helps.
2 of 4
9
By default Magnific Popup supports only one type of URL for each service so I extent it for support almost every video URL type of YouTube/Vimeo:
http://dimsemenov.com/plugins/magnific-popup/documentation.html#iframe-type
$('.my-selector').magnificPopup({
type: 'iframe',
iframe: {
patterns: {
youtube: {
index: 'youtube.com/',
id: function(url) {
var m = url.match(/[\\?\\&]v=([^\\?\\&]+)/);
if ( !m || !m[1] ) return null;
return m[1];
},
src: '//www.youtube.com/embed/%id%?autoplay=1'
},
vimeo: {
index: 'vimeo.com/',
id: function(url) {
var m = url.match(/(https?:\/\/)?(www.)?(player.)?vimeo.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/);
if ( !m || !m[5] ) return null;
return m[5];
},
src: '//player.vimeo.com/video/%id%?autoplay=1'
}
}
}
});
Just copy those two property (iframe, type) and add them to your Magnific Popup.
Envato Forums
forums.envato.com › envato customers › web and code
video in magnific-popup - Envato Forums
July 31, 2019 - Hi, thanks for your reply. The author is not answering. I have not received any response to multiple requests (via email, contact form and comments). That’s why I hired the post office for help here · When you click on the play button and the video pop up loads, the browser gives warning ...