Ios 使用mobile将vimeo嵌入bootstrap3的问题
我正在建设一个网站,需要嵌入一个视频。我用的是bootstrap3。在桌面上一切都很好。我的问题来自手机 我应该可以将其用作我的代码:Ios 使用mobile将vimeo嵌入bootstrap3的问题,ios,mobile,twitter-bootstrap-3,vimeo-player,Ios,Mobile,Twitter Bootstrap 3,Vimeo Player,我正在建设一个网站,需要嵌入一个视频。我用的是bootstrap3。在桌面上一切都很好。我的问题来自手机 我应该可以将其用作我的代码: <div class="container"> <div class="row"> <div class="col-md-12 text-center"> <h2 class="lead">How We Help</h2> <
<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>
然而,当我这样做时,桌面用户是完美的,但是移动用户看到的是一个黑色矩形,而不是带有播放控件和预览幻灯片的vimeo框架。实际上,您可以单击黑色矩形,视频将以默认行为全屏打开,但用户永远不会意识到这是一个视频,因此这并不理想
我的解决方案是“使用你自己的玩家”选项。因此,在较小的屏幕上,移动verison被称为:
<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框架。如果我不能做到这一点,我很乐意使用我现在拥有的,但我需要一些方法在移动版本中获得预览图像
非常感谢,对不起,时间太长了 我最终选择了这条路线,我发布这条路线是为了帮助其他人。我的问题仍然存在,但至少这是一个解决办法
<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-->
我们如何帮助
对捆绑支付的工作方式感到困惑吗?见见玛丽
学习我们所做的
<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-->