How To Open Youtube Video In Lightbox Using Image Module - kary4/divituts GitHub Wiki
- Add an image module and define an image;
- Add Youtube URL to the
Link URL:option; - Add the following class to the image module:
popup-youtube; - Add the following script to the wp-admin>divi>theme options>Integration>Add code to the < head > of your blog option:
<script>
jQuery( document ).ready(function() {
jQuery(document).ready(function() {
jQuery('.popup-youtube a, .popup-vimeo, .popup-gmaps').magnificPopup({
disableOn: 700,
type: 'iframe',
mainClass: 'mfp-fade',
removalDelay: 160,
preloader: false,
fixedContentPos: false
});
});
});
</script>
Video tutorial: http://youtu.be/Ax0JBWz_7qc?hd=1
===================================== JS:
<script>
(function($) {
$(document).ready(function() {
$('<span class="et-lb-close">M</span>').prependTo('body:not(.et-fb-root-ancestor) [class*="lb-content"] > .et_pb_row:first-child');
$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"] ').appendTo('#et-main-area');
$("[class*='et-lb-btn']").each(function(index, element) {
var classes = $(element).attr('class').match(/et-lb-btn\-(\w*)/);
if (classes !== null) {
$(element).on('click', function(e){
e.preventDefault();
$('.et-lb-content-' + classes[1]).toggleClass('et-lb-open');
});
$('.et-lb-close').click(function(){
$("[class*='et-lb-content']").removeClass('et-lb-open');
});
}
});
});
})(jQuery);
</script>
CSS
body:not(.et-fb-root-ancestor) [class*='et-lb-content']{position:fixed;visibility:hidden;top:0px;z-index:999999;min-height:100%;transition:all .2s 0s}body:not(.et-fb-root-ancestor) [class*='et-lb-content'] .et_pb_row{position:relative;top:50px}.et-lb-open{visibility:visible!important;width:100%}span.et-lb-close{font-size:46px;right:-1vw;margin-top:-51px;display:block;color:#fff;padding:10px;cursor:pointer;font-weight:bold;font-family:etmodules;z-index:99999999999999;position:absolute}body:not(.et-fb-root-ancestor) [class*='et-lb-content']:not(.et-lb-open){transform:scale(.3);opacity:0}body:not(.et-fb-root-ancestor) [class*='et-lb-btn']{cursor:pointer}