html 在灯箱中播放Youtube视频
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 在灯箱中播放Youtube视频相关的知识，希望对你有一定的参考价值。
* { margin: 0; padding: 0; }
a { text-decoration: none; }
$color_primary: #004eff;
$color_secondary: #ff2700;
@mixin transform($transform) {
-ms-transform: $transform;
-webkit-transform: $transform;
transform: $transform;
}
.video-item { width: 100%; max-width: 600px; margin: 200px auto 0;
figure { position: relative; width: 100%; font-size: 0;
img { width: 100%; }
a {
&:before { content: ''; position: absolute; top: 50%; left: 50%; width: 65px; height: 65px; margin-top: -32.5px; margin-left: -32.5px; border-radius: 50%; background-color: rgba($color_primary, 0.9); z-index: 10; }
&:after { content: ''; position: absolute; top: 50%; left: 50%; margin-top: -12.5px; margin-left: -7px; border: solid 13px transparent; border-left: solid 20px; border-left-color: #fff; z-index: 10; }
&:hover {
&:before { background-color: rgba($color_secondary, 0.9); }
}
}
}
}
.modal-open { overflow: hidden; }
.lightbox { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255,255,255,0.8); padding: 120px 10px; display: none; box-sizing: border-box; overflow: auto; z-index: 100; }
.popup-modal { position: relative; margin: 0 auto; display: none;
.close { position: absolute; top: 18px; right: 30px; width: 28px; height: 28px; border: solid 1px $color_primary; border-radius: 50%; @include transform(rotate(45deg)); cursor: pointer;
&:before { position: absolute; width: 14px; height: 2px; top: 50%; left: 50%; margin-left: -7px; background-color: $color_primary; content: ''; @include transform(translateY(-50%)); }
&:after { position: absolute; width: 14px; height: 2px; top: 50%; right: 50%; margin-right: -7px; background-color: $color_primary; content: ''; @include transform(translateY(-50%) rotate(90deg)); }
&:hover { border-color: $color_secondary;
&:before { background-color: $color_secondary; }
&:after { background-color: $color_secondary; }
}
}
}
.post-popup { width: 100%; max-width: 875px; background-color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.22);
.popup-header { padding: 20px 30px; font-size: 14px; margin-right: 60px;
}
.popup-video { font-size: 0;
video { width: 100%; }
img { width: 100%; }
}
.popup-main { padding: 40px 30px;
p { margin: 0 0 10px 0; }
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
jQuery(function($){
// Lightbox Triggers
lightboxTrigger.videoBox();
lightboxTrigger.modalBox();
});
/* ========================================================================= */
/* FUNCTION TO CREATE LIGHTBOX */
/* ========================================================================= */
var lightboxTrigger = {
videoBox : function() {
var self, link, target, video, videoSrc, toggle;
link = $(".open-video-link");
$(link).each(function() {
self = $(this);
target = self.attr("href");
video = $(target).find(".popup-video iframe");
videoSrc = video.attr("src");
});
$(link).each(function() {
self = $(this);
target = self.attr("href");
video = $(target).find(".popup-video iframe");
video.attr("src","");
$(this).on("click", function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
$(target).wrap( "<div class='lightbox'></div>" );
$(".lightbox").fadeIn(300, function() {
$(target).fadeIn(0);
$("body").addClass("modal-open");
video.attr("src",videoSrc);
resizeIfame(video);
});
$("body").on("click", function(event) {
if(($(event.target).hasClass("lightbox") || $(event.target).hasClass("close")) && $(target).parent().hasClass("lightbox") ) {
$(".lightbox").fadeOut(300, function() {
$(target).hide(0);
$(target).unwrap();
});
$("body").removeClass("modal-open");
video.attr("src","");
}
});
});
});
},
modalBox : function() {
var link = $(".open-modal-link");
$(link).on("click", function() {
self = $(this);
target = self.attr("href");
event.preventDefault ? event.preventDefault() : event.returnValue = false;
$(target).wrap( "<div class='lightbox'></div>" );
$(".lightbox").fadeIn(300, function() {
$(target).fadeIn(0);
$("body").addClass("modal-open");
});
$("body").on("click", function(event) {
if(($(event.target).hasClass("lightbox") || $(event.target).hasClass("close")) && $(target).parent().hasClass("lightbox") ) {
$(".lightbox").fadeOut(300, function() {
$(target).hide(0);
$(target).unwrap();
});
$("body").removeClass("modal-open");
}
});
});
}
}
/* ========================================================================= */
/* RE FUNCTION */
/* ========================================================================= */
function resizeIfame(frame) {
var oldWidth = $(frame).width();
var oldHeight = $(frame).height();
var propotion = oldHeight / oldWidth;
var newHeight;
$(frame).width('100%');
newHeight = $(frame).width() * propotion;
$(frame).height(newHeight);
$(window).resize(function() {
$(frame).width('100%');
newHeight = $(frame).width() * propotion;
$(frame).height(newHeight);
});
}Play Youtube Video In Lightbox
------------------------------
A [Pen](https://codepen.io/jksakura/pen/XaLwPr) by [Jake Zhong](https://codepen.io/jksakura) on [CodePen](https://codepen.io).
[License](https://codepen.io/jksakura/pen/XaLwPr/license).<article class="video-item">
<figure>
<a href="#post-popup1" class="open-video-link"><img src="http://www.unsplash.it/320/185?image=085"></a>
</figure>
</article>
<div id="post-popup1" class="post-popup popup-modal">
<span class="close"></span>
<div class="popup-header">
<h4>Popup Header</h4>
</div>
<div class="popup-video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/TWluKrCIBSY?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
<div class="popup-main">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec suscipit congue tortor. Nam varius eu nisl nec faucibus. Donec vestibulum tellus odio, accumsan fermentum tortor auctor quis. Nunc elementum viverra urna eget posuere. Proin non gravida urna. Integer dapibus turpis sit amet porttitor bibendum. Suspendisse volutpat condimentum tortor, ut imperdiet dui molestie ac. Donec malesuada convallis nulla, at varius orci malesuada ornare. Integer mauris est, gravida quis fringilla ac, feugiat id nisl. Pellentesque porttitor porttitor dui, sed pharetra quam pellentesque non. Duis sit amet nunc urna. Proin finibus dolor tempor, viverra tortor at, malesuada mauris.</p>
</div>
</div>以上是关于html 在灯箱中播放Youtube视频的主要内容，如果未能解决你的问题，请参考以下文章