使用移动设备在 bootstrap3 中嵌入 vimeo 的问题答案

【问题标题】：Issues with embedding vimeo in bootstrap3 with mobile使用移动设备在 bootstrap3 中嵌入 vimeo 的问题
【发布时间】：2014-04-29 17:46:38
【问题描述】：

我正在建立一个网站，需要嵌入一个视频。我正在使用引导程序 3。在桌面上一切正常。我的问题来自移动设备。

我应该能够将其用作我的代码：

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h2 class="lead">How We Help</h2>
            <p class="lead">Confused about how bundled payments work? Meet Mary and learn what we do.</p>
       </div>
   </div>
   <div class="row">
       <!--DESKTOP VERSION-->
       <div class="col-md-12">
           <div class="vid">
               <iframe src="//player.vimeo.com/video/68729036" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
           </div> 
       </div>
   </div>
</div>

我的 vid div 类强制视频响应，并且是这样的：

.vid {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    margin-bottom:20px;
}

.vid iframe,
.vid object,
.vid embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

但是，当我这样做时，桌面用户是完美的，但移动用户看到的是黑色矩形，而不是带有播放控件和预览幻灯片的 vimeo 框架。您实际上可以单击黑色矩形，视频以默认行为全屏打开，但用户永远不会意识到这是一个视频，因此并不理想。

我的解决方案是执行“使用您自己的播放器”选项。所以在较小的屏幕上，移动版本被称为：

<div class="container">
    <div class="row">
        <div class="col-md-12 text-center">
            <h2 class="lead">How We Help</h2>
            <p class="lead">Confused about how bundled payments work? Meet Mary and learn what we do. </p>
        </div>
    </div>
    <div class="row">
        <!--DESKTOP VERSION-->
        <div class="col-lg-12 col-md-12 hidden-sm hidden-xs">
            <div class="vid">
                <iframe src="//player.vimeo.com/video/68729036" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div> 
        </div>

        <!--MOBILE VERSION-->
        <div class="col-xs-12 col-sm-12 hidden-md hidden-lg">
            <div class="vid">
                <iframe src="//player.vimeo.com/video/68729036" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
            </div> 
        </div>
    </div>
</div>

我的用户现在可以在所有内容上看到一个播放按钮，并且它的行为符合预期。我唯一的问题是，在移动版本中，我失去了使用预览框架的能力，可能是因为我无法使用常规方式在移动设备中加载预览框架，而且它仍然在慢慢下降。

理想情况下，我希望在所有情况下都有一个带有预览帧和播放按钮的 vimeo 帧。如果我做不到，我很乐意使用我现在拥有的，但我需要一些方法来获得移动版中的预览图像。

非常感谢，对不起！

【问题讨论】：

标签： ios mobile twitter-bootstrap-3 vimeo-player

【解决方案1】：

我最终选择了这条路线，我发布这条路线是为了帮助其他人。我的问题仍然存在，但至少这是一种解决方法。

<div class="container">
  <div class="row">
    <div class="col-md-4 text-center">
       <h2 class="lead">How We Help</h2>
       <p class="lead extrapadding">Confused about how bundled payments work? Meet Mary      
and learn what we do.</p>
</div>


<div class="col-md-8 text-center">
  <div class="col-md-10 col-offset-1 col-sm-10 col-sm-offset-1 hidden-xs text-center">
  <div class="vid">
  <iframe src="//player.vimeo.com/video/68729036" width="550" height="309" frameborder="0" 
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  </div>

  <div class="col-xs-12 hidden-sm hidden-md hidden-lg text-center">
    <iframe src="//player.vimeo.com/video/68729036" width="250" height="141" 
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
</div>  

</div>
</div> <!--/container-->

【讨论】：