YouTube動画をレスポンシブにして貼り付けてみようよ

1,動画ページを表示
2,共有 → 埋め込みコードをクリック → 「もっと見る」をクリック
3,動画サイズとか設定
4,設定が完了したら埋め込みコードをそのままコピー

投稿ページで
1,動画を埋め込む箇所をクリック
2,「ビジュアル」編集モードで、上のメニューで「挿入 → 動画を挿入」とクリック
3,「埋め込む」タブをクリック
4,コピーしたコードを貼り付けて「OK」をクリック
5,動画サイズを調整する

できたぁ!

けど、このままだと画面の幅を狭くした時やスマホで見た時に動画がはみ出しますねぇ・・・。

なので、WordPressや通常サイトでYoutubeやVimeoの動画の埋め込みをCSSで簡単にレスポンシブWeb対応にさせる方法

を参考にさせてもらって、style.cssにmoveという名前でクラスを追加して、投稿画面では「AddQuicktag」にmoveを呼び出すタグを登録しておいて1クリックでレスポンシブ動画を埋め込めるようにしてみました。

.move{
position:relative;
width:100%;
padding-top:56.25%;
}
.move iframe{
position:absolute;
top:0;
right:0;
width:100%;
height:100%;
}

style.cssに↑を追加する。

<div class="move">
/*動画の埋め込みコード*/
</div>

投稿画面で動画の埋め込みコードの前後に↑を書き込む。

レスポンシブになりました。

投稿者の方がようつべを貼り付けたい時は、テキスト編集画面で

<iframe ・・・//www.youtube.com/・・・・・"></iframe>

という部分を選択・反転させておいて[YouTube]ボタンをクリックするだけでOKですよ。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA