HTML5 个视频在 jQuery 个彩盒中

Question

需要在灯箱中 HTML5 显示本地视频。

我试过几种方法，结果各不相同

1 - Iframe

最简单也是最好的解决方案就是这个。

<a class="lightboxed" href="media/vid1.mp4">Vid1</a>
<script>
    jQuery('a.lightboxed').colorbox({iframe:true, width:"80%", height:"80%"});
</script>

但是当我这样做时，我的视频左右有 2 个白色条纹（在移动屏幕上上下）。我不希望灯箱适合一维的百分比并适合我的视频的宽度（或高度），就像处理图像一样。但似乎 iFrame 没有宽度或高度。如果我能把背景颜色变成黑色就好了，但我不知道怎么办。

2 - 内联

<div style="display:none" id="vid">
  <video autoplay width="80%">
    <source src="media/vid1.mp4 type="video/mp4">
  </video>
</div>
<a class="lightboxed" href="#vid">Vid1</a>
<script>
    jQuery('a.lightboxed').colorbox({inline:true);
</script>

这比以前的版本差。白色背景仍然存在，内容不居中，我的视频大小不合适。

所以问题:

有没有更好的方法来实现灯箱视频？是我理解错了什么，还是我做错了什么？

Answer 1

您可以通过CSS设置背景颜色：

#cboxOverlay {
  display: table;
  height: 100%;
  position: fixed;
  top: 0;
  width: 100%;
  background: #000;
  z-index: 9999;
}

为了适应 iframe 视频，我使用了这个 Colorbox 选项：

$('a.colorbox-video').colorbox({
    transition: 'fade',
    rel:'gal',
    width: '80%',
    height: '80%',
    fixed: true,
    iframe: true,
    onLoad: function() {
        $('#cboxClose').addClass('btn btn-sm btn-link').css('color','white');
    },
    onComplete: function() {
        $('#cboxLoadedContent iframe').addClass('iframe-loaded');
    }
});

其中 CSS 规则是：

.iframe-loaded {
  width:100%;
  height:98%;
}

HTML5 个视频在 jQuery 个彩盒中

HTML5 video in jQuery colorbox

html

jquery

lightbox