使用 Bootstrap 在本地显示 YouTube 视频

Question

我有以下代码来显示 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 中的完全一样？

Answer 1

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

data-video-url="false"

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

<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>

使用 Bootstrap 在本地显示 YouTube 视频

Display YouTube videos locally using Bootstrap

html

bootstrap-4

video-player