YouTube動画をブログに埋め込む方法
YouTubeで公開されている動画を、自分のサイトやブログで紹介したいときは、記事のHTMLソースコードに動画の埋め込みコードを挿入するだけで、好きな位置に動画を表示させることができます。
YouTube動画をブログに埋め込む手順とカスタマイズ方法についてまとめました。
YouTube動画をブログに埋め込む方法
・自分のサイトの記事に埋め込みたいYouTube動画に移動します。
・動画の下にある[共有]ボタンをクリックします。
・表示された画面の[埋め込む]をクリックします。
・表示されたHTMLコードをコピーします。
・自分のサイトの記事のHTMLソースコードにコピーしたコードを貼り付けます。
以上の簡単な操作で自分のサイトの記事に、好みのYouTube動画を埋め込むことができます。
自分のサイトを訪れたユーザーに、埋め込んだYouTube動画を再生してもらうことで、文章のみ・文章+画像だけの記事よりも内容が伝わりやすく滞在時間も伸びますが、埋め込んだYouTube動画の前半部分や後半部分がブログの記事と関係ない場合があります。
そのような場合は、前半部分や後半部分を飛ばしてブログ記事に関係のある部分だけを再生できるように設定することができます。
YouTube動画の埋め込みコードのカスタマイズ方法
YouTube動画の埋め込みコードの動画URLの後ろにパラメータを付けることによって、埋め込んだ動画の再生方法を変更することができます。
・動画を自動的に再生させる
・動画を繰り返し再生させる
・動画を指定の位置から再生させる
・動画を指定の位置で停止させる
・指定した区間だけ動画を再生させる
・動画に字幕を表示させる
・動画再生後に関連動画を表示させない
このほかにも様々なカスタマイズができますが、今回は、
・動画を指定の位置から再生させる
・動画の再生を指定の位置で停止させる
・指定した区間だけ動画を再生させる
方法をご紹介します。
基本的な埋め込みコードは以下のようになっており、動画URLの後ろに必要に応じたパラメータを付加して、埋め込んだ動画の再生方法を変更していきます。
動画の再生を開始する時間と停止する時間を秒数で指定するので、例えば5分を秒に置き換えるときは5×60＝300、10分を秒に置き換えるときは10×60＝600となります。
動画を指定の位置から再生させる方法
動画を指定の位置(5分)から再生させたい場合は、埋め込みコードの動画URLの後ろに?start=300というパラメータを付加すれば、動画を5分から再生するように設定することができます。
動画の再生を指定の位置で停止させる方法
動画の再生を指定の位置(10分)で停止させたい場合は、埋め込みコードの動画URLの後ろに?end=600というパラメータを付加すれば、動画の再生を10分で停止させるように設定することができます。
指定した区間だけ動画を再生させる方法
指定した区間(5分～10分)だけ動画を再生させたい場合は、上記の2つのコードを&で繋いで、埋め込みコードの動画URLの後ろに?start=300&end=600というパラメータを付加すれば、5分～10分の区間だけ動画を再生させるように設定することができます。
さいごに
以上の3つの方法で、指定したとおりに動画が再生されるかどうかを確認してみます。
私が大好きなYouTube動画「すぐキレるポメラニアン」でテストしますが、再生時間が4分17秒と長いので、動画を再生すると表示される画面下部の歯車マークをクリックして、速度を標準から2に変更すれば2倍速になり視聴時間が短縮できます。
再生位置を指定していない通常の動画
動画を指定の位置から再生させる
ポメラニアンのコタが浴室でシャンプーをされ始めるのが2分4秒なので、開始時間を124秒に設定しました。
動画の再生を指定の位置で停止させる
浴室でのシャンプーが終わったのが4分7秒だったので、停止時間を247秒に設定しました。
指定した区間だけ動画を再生させる
浴室でシャンプーをされ始めた2分4秒(124秒)からシャンプーが終わった4分7秒(247秒)までを指定区間として設定しました。
記事に埋め込んだYouTube動画の下に「○○が始まるのは○分○秒からです」という説明文を記載しているブログを良く目にしますが、せっかくサイトを訪問してくれたユーザーの手を煩わせることになるので、カスタマイズしたYouTube動画を埋め込んだ方がすっきりしていて良いですね！
コメント