Skip to content

Instantly share code, notes, and snippets.

@bigdigital
Last active December 26, 2019 19:24
Show Gist options
  • Save bigdigital/71164c8607bbf65c57932d626ba95df0 to your computer and use it in GitHub Desktop.
Save bigdigital/71164c8607bbf65c57932d626ba95df0 to your computer and use it in GitHub Desktop.
Modal Element - Ultimate Addon's For Visual composer: Play YouTube video automatically when modal is opened.
<script>
function modalAutoPlayVideo(modalWrapper){
"use strict";
var $youtubeframe = modalWrapper.find(".ult_modal-body iframe");
if ($youtubeframe.length){
var videosrc = $youtubeframe.attr('videosrc');
if (videosrc == null)
{
var videosrc = $youtubeframe.attr('src');
$youtubeframe.attr('videosrc', videosrc);
}
$youtubeframe.addClass("playing");
$youtubeframe.attr("src", videosrc+'?autoplay=1');
var $youtubeframeparent = $youtubeframe.parent();
var $youtubeframedetached = $youtubeframe.detach();
$youtubeframedetached.appendTo($youtubeframeparent);
}
}
function modalStopVideo(){
"use strict";
var $youtubeframe = jQuery(".ult_modal-body iframe.playing");
if ($youtubeframe.length){
var videosrc = $youtubeframe.attr('videosrc');
$youtubeframe.attr("src", videosrc);
}
}
jQuery(document).on('onUVCModalPopupOpen', function(event, class_id) {
event.preventDefault();
var $modalWrapper = jQuery("." + class_id);
modalAutoPlayVideo($modalWrapper);
});
jQuery(document).on('onUVCModalPopUpClosed', function(event, class_id) {
event.preventDefault();
modalStopVideo();
});
jQuery(document).ready(function(){
var $modal = jQuery('.ult-modal-input-wrapper');
if ($modal.attr('data-keypress-control') == 'keypress-control-enable'){
jQuery(this).keydown(function( e ) {
if (e.keyCode == 27) {
modalStopVideo();
}
});
}
});
jQuery(document).on("click", ".close-modal", function(e) {
jQuery(".ult-overlay-close-inside").click();
jQuery(this).hasClass("anchor-modal");
clickAnchorLink( jQuery( this ), e );
});
</script>
@bigdigital
Copy link
Author

bigdigital commented Sep 27, 2018

Place js code to the site.
Then modify "scr" in the youtube embedd code to the format like this (remove additional queries)
<iframe src="https://www.youtube.com/embed/qtg0UJC-oX0" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

And place it to the "Modal Content" window. In the "What's in Modal Popup? " filed, select "Youtube video"

@kashifkiduniya
Copy link

Great!
Its working!
I just hope this script will not effect to other elements.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment