ブログにyoutubeなどの動画を埋め込むことがあると思います。
実はその埋め込んだ動画は、スマホでみた時に最適化されていません。
「AddQuicktag」というプラグインを使用すれば簡単にできます。
それでは、レスポンシブにする手順を書いていきます。
（レスポンシブとは、柔軟に調整するという意味です。）
動画のスマホ最適化（レスポンシブ）の手順〜設定編〜
ここでが、今後繰り返し、簡単に使えるようにするための方法を画像を交えて説明していきます。
①赤枠のプラグインの新規追加をクリックします。
②赤枠部分に「AddQuicktag」と入力してください。
③赤枠部分の「今すぐインストール」を押して、有効化と表示が変わったら、「有効化」をクリックしてください。
④外観の追加CSSに、以下に記載したCSSを追加。
.youtube {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.youtube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
⑤設定から、「AddQuicktag」を選択して、以下の赤枠部分のように入力してください。
これで設定は完了です。
動画のスマホ最適化（レスポンシブ）の手順〜使い方編〜
設定は終わっているので、実際に使用してみましょう。
①記事を書く画面を開き、テキストモードにします。
②赤枠の「YOUTUBE動画」というところをクリックしてタグを入力させます。
③タグが入力されていますので、矢印の間のところに埋め込みたいURLを貼り付けてください。
④これで完了です。念のために、スマホから確認するようにしてください。
以上で、ブログへの動画埋め込み時のスマホの最適化についてでした。