広島のホームページ作成MCSタイトルページ

投稿BLOG

YouTube動画の埋め込み

2020年02月28日

YouTubeをWordPressに埋め込む方法のご質問をいただきましたのでご紹介いたします。

クラシックエディタの場合

YouTubeに動画を投稿、公開しましたら共有のボタンをクリックします。

youTube画像

次に埋め込みをクリック

動画の埋め込みというコードが出てきますので、そちらをコピーします。
以下のようなコードです。

<iframe width="560" height="315" src="https://www.youtube.com/embed/●●●●●●●●●"frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

YouTube動画を埋め込みたいページを開いて、右上にありますビジュアルとテキストのうちテキストを選択します。
それからコピーした埋め込みコードを埋め込みたい場所に貼り付けます。
これで更新ボタンを押しましたら一応完了です。

YouTubeを埋め込んだサイトを見ていて、YouTtubeどうがを見ると後に関連動画が表示されているサイトをよく見ますが、関連動画はイメージを損ないますので表示させないようにしたほうがいいかと思います。
動画を確認して見終わった後に関連動画が出てくるのがいやで消したい場合は
YouTubeの埋め込みURLの後ろに ?rel=0 を足します。
そうすると関連動画が表示されなくなります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/●●●●●●●●●?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Gutenbergの場合

動画のアドレスをコピーします。
アドレスバーにあるURLをコピーします。

Gutenbergのコンテンツブロックから埋め込み YouTubeを選択します。

YouTubeのアドレスを貼り付けて更新して更新します。
これで完了です。

一般の方には難しいのですがGutenbergで関連画像を出さないようにするにはWordPressのfunction.phpに以下のコードを書きます。

function add_youtube_option( $ret ) { return str_replace( '?rel=0', '?rel=0', $ret ); } add_filter( 'the_content', 'add_youtube_option', 11 );

Blog一覧