0

サイトを構築していて、動画を埋め込む必要があります。私はブートストラップ 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 フレームが必要です。それができない場合は、現在持っているものを喜んで使用しますが、モバイル バージョンでプレビュー イメージを取得する方法が必要です。

どうもありがとう、そして長々とすみません！

4

1 に答える 1

0

私は他の人を助けるために投稿しているこのルートに行き着きました。私の質問はまだ残っていますが、少なくともこれは回避策です。

<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-->
于 2014-05-01T19:17:59.873 に答える