wordpressで、 記事を投稿する画面からアップロードした動画をレスポンシブにしたいです。

Question

wordpressで、
記事を投稿する画面からアップロードした動画をレスポンシブにしたいです。

[video width="960" height="300" mp4="url"][/video]

wp-videoというクラス名でcssで編集をしたのですが、うまくいきません。
お願いします。

Comments

[退会済みユーザー]

実際に出力されるHTMLやCSSの例があれば回答もつきやすいと思います。

[quasar_QSS]

この部分です。[video width="960" height="300" mp4="url"][/video]

[退会済みユーザー]

まず「HTML」と「ショートコード」の違いを勉強するところから始めてみてください。基礎知識がないとWordPressのカスタマイズは難しいです。

[quasar_QSS]

[video width="960" height="300" mp4="url"][/video]このショートコードで入れている動画をcssでレスポンシブにしたいのです。
急いでいます。

[quasar_QSS]

ショートコードで出力されているHTMLをかきこまなければいけないのでしょうか。ショートコードで入れている動画のサイズをスマホ対応にする一般的なやり方を知りたいです。

[CHERRY]

レスポンシブ対応する場合、通常は、ショートコードで出力しているHTMLをレスポンシブ対応に書き換える必要があります。

Answer 1

普通にwidthはダメだけど、max-widthなら効くよ

ブラウザで要素詳細を見ればわかるけど、WPのvideoショートコードでは
ムービーのサイズに合わせてJSでコンテナのwidthを指定してる

流石にcssファイルからじゃJSが直接指定したwidthより強い指定はかけれない
だけどmax-widthなら効くのでこっちでサイズを制御、min-widthも同じく

蛇足ながら

WPのvideoショートコードはそこそこいい感じなプレイヤーを出してくれるので
簡単にムービーを記事中に挿入するにはいいけど
もし背景にフルスクリーンで動画貼りたいとかいう目的なら
普通にvideoタグ使った方がいいです

Comments

[quasar_QSS]

一番わかりやすく、自分で修正することができました。
ありがとうございます。
今回は質問の仕方がよくなかったようです。
わかりやすい質問文にするようにしないといけないですね。