使用 Bootstrap 在本地显示 YouTube 视频答案

【问题标题】：Display YouTube videos locally using Bootstrap使用 Bootstrap 在本地显示 YouTube 视频
【发布时间】：2019-01-12 20:59:23
【问题描述】：

我有以下代码来显示 YouTube 视频：

<div class="mbr-gallery-item mbr-gallery-item--p1 video-slide" data-video-url="https://www.youtube.com/watch?v=Bhy-laGxglg&amp;t=1s" data-tags="Awesome"><div href="#lb-gallery1-8" data-slide-to="0" data-toggle="modal">
  <div>
  </div>
  <img alt="" src="assets/images/2018-7-0-22-43-38-937439.jpg">
  <span class="icon-video"></span>
  <span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span></div>
</div>

我的问题是如何使用 Bootstrap 将视频带到本地，以便结果与example 中的完全相同？

【问题讨论】：

您的意思是像示例一样观看本地视频？
没错，这就是我想要的

标签： html bootstrap-4 video-player

【解决方案1】：

对于要替换为本地视频的任何项目，请将 data-video-url 更改为 false：

data-video-url="false"

并在Lightbox部分将img替换为video标签，例如replace：

<img src="assets/images/gallery02.jpg" alt="" title="">

与：

<video style="width: 100%;" src="test.mp4" controls></video>

使用这个html作为参考：

<!DOCTYPE html>
<html >
  <head>
    <!-- Site made with Mobirise Website Builder v4.8.1, https://mobirise.com -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="generator" content="Mobirise v4.8.1, mobirise.com">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
    <link rel="shortcut icon" href="assets/images/logo2.png" type="image/x-icon">
    <meta name="description" content="">
    <title>Home</title>
    <link rel="stylesheet" href="assets/web/assets/mobirise-icons/mobirise-icons.css">
    <link rel="stylesheet" href="assets/tether/tether.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-grid.min.css">
    <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="assets/dropdown/css/style.css">
    <link rel="stylesheet" href="assets/theme/css/style.css">
    <link rel="stylesheet" href="assets/gallery/style.css">
    <link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
  </head>
  <body>
    <section class="engine"><a href="https://mobiri.se/k">how to develop your own website</a></section>
    <section class="mbr-gallery mbr-slider-carousel cid-qZSgDBHIbe" id="gallery1-8">
      <div>
        <div>
          <!-- Filter --><!-- Gallery -->
          <div class="mbr-gallery-row">
            <div class="mbr-gallery-layout-default">
              <div>
                <div>
                  <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Awesome">
                    <div href="#lb-gallery1-8" data-slide-to="0" data-toggle="modal">
                      <div>
                      </div>
                      <img alt="" src="assets/images/2018-7-0-22-43-38-937439.jpg">
                      <span class="icon-video"></span>
                      <span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
                    </div>
                  </div>
                  <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Responsive">
                    <div href="#lb-gallery1-8" data-slide-to="1" data-toggle="modal">
                      <div>
                      </div>
                      <img alt="" src="assets/images/2018-7-0-22-44-35-153261.jpg">
                      <span class="icon-video"></span>
                      <span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
                    </div>
                  </div>
                  <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Creative">
                    <div href="#lb-gallery1-8" data-slide-to="2" data-toggle="modal">
                      <div>
                      </div>
                      <img alt="" src="assets/images/2018-7-0-22-45-13-170283.jpg">
                      <span class="icon-video"></span>
                      <span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
                    </div>
                  </div>
                  <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Animated">
                    <div href="#lb-gallery1-8" data-slide-to="3" data-toggle="modal">
                      <div>
                      </div>
                      <img alt="" src="assets/images/2018-7-0-23-14-24-423490.jpg">
                      <span class="icon-video"></span>
                      <span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
                    </div>
                  </div>
                  <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Awesome">
                    <div href="#lb-gallery1-8" data-slide-to="4" data-toggle="modal">
                      <div>
                      </div>
                      <img alt="" src="assets/images/2018-7-0-22-55-6-693450.jpg">
                      <span class="icon-video"></span>
                      <span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
                    </div>
                  </div>
                  <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Awesome">
                    <div href="#lb-gallery1-8" data-slide-to="5" data-toggle="modal">
                      <div>
                      </div>
                      <img alt="" src="assets/images/2018-7-0-23-0-47-37421.jpg">
                      <span class="icon-video"></span>
                      <span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
                    </div>
                  </div>
                  <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Responsive">
                    <div href="#lb-gallery1-8" data-slide-to="6" data-toggle="modal">
                      <div>
                      </div>
                      <img alt="" src="assets/images/2018-7-0-23-4-6-548102.jpg">
                      <span class="icon-video"></span>
                      <span class="mbr-gallery-title mbr-fonts-style display-7">Type caption here</span>
                    </div>
                  </div>
                  <div class="mbr-gallery-item mbr-gallery-item--p1" data-video-url="false" data-tags="Animated">
                    <div href="#lb-gallery1-8" data-slide-to="7" data-toggle="modal">
                      <div>
                      </div>
                      <img alt="" src="assets/images/2018-7-0-23-8-54-261614.jpg">
                      <span class="icon-video"></span>
                      <span class="mbr-gallery-title mbr-fonts-style display-7">Ttest</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="clearfix">
              </div>
            </div>
          </div>
          <!-- Lightbox -->
          <div data-app-prevent-settings="" class="mbr-slider modal fade carousel slide" tabindex="-1" data-keyboard="true" data-interval="false" id="lb-gallery1-8">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-body">
                  <div class="carousel-inner">
                    <div class="carousel-item active video-container">
                      <img src="assets/images/gallery00.jpg" alt="" title="">
                    </div>
                    <div class="carousel-item video-container">
                      <video style="width: 100%;" src="test.mp4" controls></video>
                    </div>
                    <div class="carousel-item video-container">
                      <video style="width: 100%;" src="test.mp4" controls></video>
                    </div>
                    <div class="carousel-item video-container">
                      <video style="width: 100%;" src="test.mp4" controls></video>
                    </div>
                    <div class="carousel-item video-container">
                      <video style="width: 100%;" src="test.mp4" controls></video>
                    </div>
                    <div class="carousel-item video-container">
                      <video style="width: 100%;" src="test.mp4" controls></video>
                    </div>
                    <div class="carousel-item video-container">
                      <video style="width: 100%;" src="test.mp4" controls></video>
                    </div>
                  </div>
                                    <a class="carousel-control carousel-control-prev" role="button" data-slide="prev" href="#lb-gallery1-8" onclick="$('.active video').get(0).pause()"><span class="mbri-left mbr-iconfont" aria-hidden="true"></span><span class="sr-only">Previous</span></a><a class="carousel-control carousel-control-next" role="button" data-slide="next" href="#lb-gallery1-8" onclick="$('.active video').get(0).pause()"><span class="mbri-right mbr-iconfont" aria-hidden="true"></span><span class="sr-only">Next</span></a><a onclick="$('.active video').get(0).pause()" class="close" href="#" role="button" data-dismiss="modal"><span class="sr-only">Close</span></a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <script src="assets/web/assets/jquery/jquery.min.js"></script>
    <script src="assets/popper/popper.min.js"></script>
    <script src="assets/tether/tether.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
    <script src="assets/smoothscroll/smooth-scroll.js"></script>
    <script src="assets/dropdown/js/script.min.js"></script>
    <script src="assets/touchswipe/jquery.touch-swipe.min.js"></script>
    <script src="assets/vimeoplayer/jquery.mb.vimeo_player.js"></script>
    <script src="assets/bootstrapcarouselswipe/bootstrap-carousel-swipe.js"></script>
    <script src="assets/masonry/masonry.pkgd.min.js"></script>
    <script src="assets/imagesloaded/imagesloaded.pkgd.min.js"></script>
    <script src="assets/theme/js/script.js"></script>
    <script src="assets/gallery/player.min.js"></script>
    <script src="assets/gallery/script.js"></script>
    <script src="assets/slidervideo/script.js"></script>
  </body>
</html>

【讨论】：

感谢您的宝贵时间结果不是我想要的：drive.google.com/file/d/1QhAvtr3MiGPoUTvIH0ENe9Db5CsurDb_/… 播放视频时，结果如下：drive.google.com/open?id=1l4jS-fsoTxlW5kR65C8Qcug4lGwN5cEU
我试过了，但没用看这里，使用 YouTube 链接时效果很好：husam-ebish.ch/Bootstrap/index.html 这是您的代码：husam-ebish.ch/Bootstrap/test.html
它有什么问题？视频在我的浏览器上打开并播放
我在多个浏览器上都试过了，还是不行，husam-ebish.ch/Bootstrap/test.html
添加这个：onclick="$('.active video').get(0).pause()" 到 'next' 和 'previous' 和 'close' 一个标签。更新了代码。使用它。