本記事では、WordPressを使用したブログの中に、YouTube動画を埋め込む方法と、スマホ表示時に動画が画面の外にはみ出さないレスポンシブデザインに対応させる方法を紹介します。
追加で簡単なコードを記述するだけなので、プログラミング（HTMLやCSS）の知識がなくても大丈夫です。
ブログ記事を作成する際に、ぜひ試してみてください。
WordPressにYouTube動画を埋め込む方法
1．YouTubeの埋め込み用コードを取得→コピー
↓埋め込みたいYouTube動画のページに移動→共有ボタンをクリックします。
↓「埋め込む」ボタンをクリックすると、埋め込み用のコードが表示されます。
↓表示された埋め込み用コードをすべて選択し、コピーします。
コードをコピーしたら、WordPressの編集画面に移動します。
2．WordPressのテキストエディターに貼り付ける
埋め込み用コードを貼り付ける際は、「ビジュアル」エディタではなく「テキスト」エディタを使用します。
↓テキストエディタを表示→埋め込みたい位置にカーソルを合わせ、コードを貼り付けます。
以上で、WordPressにYouTube動画を埋め込むことができます。
↓しかし、スマートフォンなど画面の幅が狭い端末で表示した場合、埋め込んだ動画が画面の外にはみ出してしまいます。
そのため、画面幅に合わせて動画を表示するレスポンシブデザインに対応させる必要があります。
レスポンシブデザインに対応させる方法
YouTube動画の埋め込みコードの中に『style=“max-width:100%”』を追加する
YouTubeの埋め込みコードの最初に『iframe』というタグがついています。
↓その『iframe』というタグの後に半角スペースを空けて、『style=“max-width:100%”』というコードを半角で入力します。
↓以上で、狭い画面でもはみ出ることなく動画の埋め込みが表示されます。
↓ブログ上では正方形で表示されていますが、再生ボタンを押せば横長の動画として再生されます。
まとめ
YouTube動画をWordPressに埋め込む方法とレスポンシブデザインに対応させる方法を紹介しました。
YouTubeのコードをペーストしておくだけで自動でレスポンシブに対応させる方法もありますが、プログラミングの専門知識がない方が実践するのは困難です。
今回紹介した方法であれば、複雑な作業やコードの知識はほとんど必要ないので、誰でもできると思います。
皆さんのブログ更新のお役に立てたら幸いです。
最後まで読んでいただきありがとうございました！
