0

Wordpress コアからビデオを応答的に動作させることができません。

私は次のCSSを使用しています：

.videocontent {
  width: 100%;
  height: 100%;
  max-width: 1024px;
  margin: 0 auto;
} 

.wp-video-shortcode {
  max-width: 100%;
}

ショートコードを使用する次の HTML は、含まれる div のフル サイズにスケーリングされません。

<div class="videocontent">
    <?php
    echo do_shortcode('[video webm="http://localhost/dnp/stalker.webm" width=100%]');
    ?>
</div>

ただし、HTML を直接使用すると問題なく動作します。

<div class="videocontent">
    <video  id="myvideo2" style="width:90%;height:100%;" controls="controls">
      <source src="http://localhost/dnp/stalker.webm" type="video/webm"/>
    </video>
</div>

高さ 100%、高さと幅 100%、幅 100% など、ショートコードでさまざまな設定を試しました。

私は何を間違っていますか？

スクリーンショット ->スクリーンショット

上記の例を次に示します - ブラウザのサイズを変更してみてください

4

4 に答える 4

0

幅パラメーターは、パーセンテージではなく整数にする必要があります。

width="1140"

それ以外の

width=100%

ビデオショートコードのコーデックスページによると。

于 2013-11-14T16:00:48.907 に答える
0

私はテーマに取り組んでおり、スタイル シートでビデオの最大幅を設定すると、WP で埋め込まれたビデオがブラウザの幅の変更に反応しなくなることがわかりました。

于 2013-11-06T19:16:27.020 に答える
0

WordPress がショートコードを出力すると、[video]次のように動画が DIV でラップされます。

<div style="width:640px;height:100px">
   video here ...
</div>

ショートコードに渡す幅を[video]パーセンテージにすることはできません。1030したがって、たとえば次のようにフォーマットされた幅を配置する必要があります。

<div class="videocontent">
    <?php echo do_shortcode('[video webm="..." width="1030"]'); ?>
</div>

現在、DIV を取得してレスポンシブになるようにスタイリングしていますが、これを WordPress のショートコード出力の外[video]に配置しています。あなたの例を見ると、ページを縮小すると、レスポンシブ ビデオが実際に機能していることがわかります。ただし、問題は、サイトを完全に展開したときに 640px 以上に展開されないことです。

したがって、拡張されたサイトのビデオの元の出力が、レスポンシブ ラッピング div を満たすのに十分な大きさであることを確認するだけでよいと思います。これは機能しますか？

注: 1030 を選択したのは、リンクしている例のコンテンツ領域が大きいためです。

于 2013-11-06T21:07:28.253 に答える