YouTube動画を開始/終了時間を指定してブログに埋め込む手順を超初心者向けにやさしく解説

YouTube動画

YouTube動画をブログ(WordPress)へ貼り付ける際の手順を、超初心者向けに分かり易く解説していきます。

 

WordPressテーマ:Xeory BASE

WordPressバージョン 5.2.2–ja

 

YouTube動画をそのまま貼り付ける場合

まずYouTube動画サイトから、あなたのブログへ貼り付けたい動画のページを開き、「共有」をクリックします。

YouTube動画埋め込み手順1

 

以下の小窓が開きますので、「埋め込む」をクリックします。

YouTube動画埋め込み手順2

 

以下の画面が開いたら、赤枠の部分をクリックしてキーボードの「Ctrl」キーと「C」キーを同時に押してコピーします。

YouTube動画埋め込み手順3

 

次にWordPressの編集画面を開き、右上にある「テキスト」タブをクリックして「テキスト編集画面」へ切り替えます。

YouTube動画埋め込み手順4

 

以下のテキスト編集画面に切り替わったら、動画を貼り付けたい位置をクリックした後、先程コピーしておいた動画のソースをキーボードの「Ctrl」キーと「V」キーを同時に押して貼り付けます。

YouTube動画埋め込み手順5

 

ビジュアル編集画面に戻して、以下のように動画が表示されていれば成功です。

なお、動画は編集画面の状態でも動作しますので、動画が正しく再生されることを確認しておきましょう。

YouTube動画埋め込み手順6

 

*但し、以下のメッセージが表示された場合は、残念ながら貼り付けできません!

YouTube動画埋め込み手順6-1

 

なお、このままの状態ですとスマートフォンで表示させた際に、以下のように画像の一部が表示されない場合があります

スマホ表示異常

 

その対策として、以下の記事を参考にして「WordPressのスタイルシート」と「YouTube動画の埋め込みタグ」へ追加の記述を行ってください。

ブログに埋め込んだYouTube動画をiPhoneで見ると、はみ出してしまう場合の対処法

 

記事内へは、以下のように「YouTube動画の埋め込みタグ」の前後に赤字のタグを設置します。

<div class=”movie-wrap”>YouTube動画の埋め込みタグ</div>

 

以下の動画は上記の設定で設置したものです。

 

YouTube動画の開始位置のみを指定する場合

今回説明用として使用している動画は、長さが33秒のものですが、動画の開始位置を「3秒~」と変更したい場合は、以下の画面のところで「開始位置」の左側にある□をクリックした後、その右端にある「0:00」を「0:03」に変更します。

YouTube動画埋め込み手順7

 

すると、上の「動画の埋め込みソース」のhttpsから始まるURLの最後に「?start=3」が追加されますので、先程と同じ要領でソース全体をコピーして、ブログの「テキスト編集画面」へ貼り付けます。

 

貼り付けが完了したら動画を再生し、3秒(設定した秒数)の位置からスタートすることを確認しておきましょう。

 

以下の動画が開始位置のみを指定した場合のものです。

 

YouTube動画の終了位置のみを指定する場合

次は、動画の再生が0秒から18秒でストップするように設定してみましょう。

 

終了位置のみを指定する場合は、YouTube の画面から設定することができませんので、一旦埋め込み用のコードを取得(コピー)しておき、先程と同じようにhttpsから始まるURLの最後に「?end=18」を追加します。

 

<div class=”movie-wrap”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/t12ItbRlijE?end=18” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>

 

上の埋め込み用ソースを先程と同じ要領でコピーし、ブログの「テキスト編集画面」へ貼り付けます。

 

貼り付けが完了したら動画を再生し、18秒(設定した秒数)の位置で動画が停止することを確認しておきましょう。

 

以下の動画が終了位置のみを指定した場合のものです。

 

YouTube動画の開始位置と終了位置の両方を指定する場合

最後は、動画の再生が3秒からスタートして18秒でストップするように設定してみましょう。

 

この場合もYouTube の画面からは設定することができませんので、一旦埋め込み用のコードを取得(コピー)しておき、先程と同じようにhttpsから始まるURLの最後に「?start=3&end=18」を追加します。

 

<div class=”movie-wrap”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/t12ItbRlijE?start=3&end=18” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>

 

上の埋め込み用ソースを先程と同じ要領でコピーし、ブログの「テキスト編集画面」へ貼り付けます。

 

終了位置のみを設定する場合は「?end=18」でしたが、今回は「?」ではなく「&」ですので注意してください。

 

貼り付けが完了したら動画を再生し、3秒(設定した秒数)の位置からスタートし、18秒(設定した秒数)の位置で動画が停止することを確認しておきましょう。

 

以下の動画が開始位置と終了位置の両方を指定した場合のものです。

 

YouTube動画の再生後に関連動画を表示させたくない場合

これまでの動画では、動画再生後に関連動画が表示されますが、この関連動画が表示されないように設定してみたいと思います。

 

動画の再生が3秒からスタートして18秒でストップし、動画再生後は関連動画が表示されないように設定してみます。

 

この場合もYouTube の画面からは設定することができませんので、一旦埋め込み用のコードを取得(コピー)しておき、先程と同じようにhttpsから始まるURLの最後に「?start=3&end=18&rel=0」のように「&rel=0」を追加します。

 

<div class=”movie-wrap”><iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/t12ItbRlijE?start=3&end=18&rel=0” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe></div>

 

上の埋め込み用ソースを先程と同じ要領でコピーし、ブログの「テキスト編集画面」へ貼り付けます。

 

貼り付けが完了したら動画を再生し、3秒(設定した秒数)の位置からスタートし、18秒(設定した秒数)の位置で動画が停止、更に動画再生後には関連動画が表示されない事を確認しておきましょう。

 

以下の動画が開始位置と終了位置の両方を指定し、更に動画再生後には関連動画が表示されないようにした場合のものです。

 

いかがでしたでしょうか?

 

WordPressテーマやWordPressバージョンの違い、或いはYouTube動画所有者の設定によっては、本記事の通りに動作しない事も考えられますが、ぜひ参考にしてみて下さいね。

 

 

SNSでもご購読できます。

コメントを残す

*