記事にYouTubeの動画を埋め込む

広告

Blogger では動画をアップロードして記事に挿入する以外に YouTube に投稿された動画を記事に埋め込むことができます。ここでは Bloggerの記事に YouTube の動画を埋め込む方法について解説します。

YouTubeの動画を検索して埋め込む

最初に Blogger で用意されている機能を使って YouTube の動画を検索し記事に埋め込む方法について解説します。記事の新規作成画面を表示し、動画を埋め込みたい位置にカーソルを置いてから「動画を挿入」をクリックしてください。

YouTubeの動画を検索して埋め込む(1)

「動画を追加」の画面が表示されたら「YouTube から」タブをクリックしてください。

YouTubeの動画を検索して埋め込む(2)

YouTubeの動画を検索して埋め込む(3)

YouTube の動画を検索するための画面が表示されます。

YouTubeの動画を検索して埋め込む(4)

キーワードを入力して「検索」ボタンをクリックしてください。キーワードに一致する YouTube の動画が表示されます。

YouTubeの動画を検索して埋め込む(5)

埋め込みたい動画が見つかりましたらクリックして選択してから画面下部の「選択」をクリックしてください。

YouTubeの動画を検索して埋め込む(6)

記事のカーソルがあったところに YouTube の動画が埋め込まれました。

YouTubeの動画を検索して埋め込む(7)

動画をアップロードした場合と同じく、編集画面に表示された動画をクリックしてもサイズの選択などのメニューは表示されません。

YouTubeの動画を検索して埋め込む(8)

それでは記事を投稿して公開してみます。公開後にブログにアクセスし該当の記事を表示すると次のように記事に動画が表示されました。動画の再生も記事内で行うことができます。

YouTubeの動画を検索して埋め込む(9)

YouTubeの動画を検索して埋め込む(10)

動画のサイズを設定する

記事の作成画面で「作成」モードでは動画のサイズを変更する手段が見つからなかったので「HTML」モードに変更してみると、動画が挿入された部分は次のように記述されていました。

<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen=""
class="YOUTUBE-iframe-video"
data-thumbnail-src="https://i.ytimg.com/vi/_VuQZ_5p3K0/0.jpg"
frameborder="0"
height="266"
src="https://www.youtube.com/embed/_VuQZ_5p3K0?feature=player_embedded"
width="320"
>
</iframe></div>

動画のサイズは横幅( width )が 320px 高さ( height )が 266px に設定されています。動画のサイズを変更したい場合には直接この数値を書き換えてください。

今回は横幅を 560px 、高さを 315px に設定してみます。

<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen=""
class="YOUTUBE-iframe-video"
data-thumbnail-src="https://i.ytimg.com/vi/_VuQZ_5p3K0/0.jpg"
frameborder="0"
height="315"
src="https://www.youtube.com/embed/_VuQZ_5p3K0?feature=player_embedded"
width="560"
>
</iframe></div>

動画のサイズを設定する(1)

編集したあと「作成」モードに切り替えてみると次のように表示されました。

動画のサイズを設定する(2)

それでは記事を更新します。その後でブログへアクセスし記事を表示してみると次のように表示されました。再生もこのサイズで行うことができます。

動画のサイズを設定する(3)

YouTubeの動画埋め込み用コードをHTML編集画面で貼り付ける

二つ目の方法は YouTube で動画の埋め込み用のコードを取得し、 Blogger の HTML 編集画面から貼り付ける方法です。 YouTube の画面で埋め込みたい動画のページを表示したあと、動画の右下に表示されている「共有」をクリックしてください。

YouTubeの動画埋め込み用コードをHTML編集画面で貼り付ける(1)

共有の方法がいくつか表示されます。「埋め込む」をクリックしてください。

YouTubeの動画埋め込み用コードをHTML編集画面で貼り付ける(2)

動画の埋め込み用コードが表示されます。「コピー」をクリックしてコードをコピーしてください。

YouTubeの動画埋め込み用コードをHTML編集画面で貼り付ける(3)

なお今回取得したコードは次のようなものでした。サイズを変更する場合は width と height に対する値を変更してください。

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

それでは Blogger の記事作成画面で埋め込み用コードを入力します。コードの入力は「HTML」モードから行いますので、画面左上の「HTML」をクリックして「HTML」モードに変更してください。

YouTubeの動画埋め込み用コードをHTML編集画面で貼り付ける(4)

動画を埋め込みたい位置に先ほど YouTube の画面で取得した埋め込み用コードを貼り付けてください。

YouTubeの動画埋め込み用コードをHTML編集画面で貼り付ける(5)

それでは「作成」モードに戻してみます。画面左上の「作成」をクリックして「作成」モードに変更してください。埋め込み用コードを貼り付けた位置に YouTube の動画が埋め込まれているのが確認できます。

YouTubeの動画埋め込み用コードをHTML編集画面で貼り付ける(6)

記事を更新し、その後でブログに表示された記事を表示してみると、記事に動画が埋め込まれており動画の再生も記事上で行うことができます。

YouTubeの動画埋め込み用コードをHTML編集画面で貼り付ける(7)

-- --

Bloggerの記事に YouTube の動画を埋め込む方法について解説しました。

( Written by Tatsuo Ikura+ )

関連記事 (一部広告含む)
Profile
profile_img

著者 / TATSUO IKURA

初心者~中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。