Last active
December 26, 2019 19:24
-
-
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
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
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"