YouTube動画のブログ埋め込みとサイズの調整方法

YouTube動画

ブログにYouTube動画を埋め込み、サイズを調整して公開する方法をご紹介します。

方法はとても簡単、YouTubeから埋め込みコードを取得して、そのままブログに貼り付けるだけです。動画のサイズもブログの幅に合わせて自由に調整できます。

ブログ内のイメージ表現方法として、画像だけでなくYouTube動画が使えるようになると幅が広がりますよ。

YouTubeで動画の埋め込みコード取得

では、YouTubeから動画の埋め込みコードを取得してみましょう。まずは該当のYouTube動画を開きます。

YouTube動画

「チャンネル登録」の下にある「共有」→「埋め込みコード」の順にクリックします。

YouTube 埋め込みコード取得

youtube動画の埋め込みコードが表示されるので、そのまま全てコピーしてください。

YouTube 埋め込みコード取得

あとはブログ編集画面で、YouTube動画を埋め込みたい場所にコードを貼り付けるだけです。

YouTube 埋め込みコード貼り付け

この埋め込みコードはHTML形式なので、アメブロやFC2ブログ、ライブドアブログ等のあらゆる無料ブログで使用可能です。もちろんWordPressや通常のホームページでも活用できますよ。

YouTube動画埋め込み 動画サイズ調整

続いて埋め込み動画のサイズを調整します。ブログによってはデフォルトのサイズで動画を埋め込むと、横幅が合わずにはみ出る場合があるので、動画のサイズを事前に調整します。

まずは埋め込みコードの下にある「もっと見る」をクリックします。

youtube埋め込みコード サイズ調整

埋め込み動画のプレビューが表示されました。その左下にある「動画のサイズ」で大きさを調整します。

youtube埋め込みコード 動画サイズ調整

「動画のサイズ」をクリックすると、埋め込み動画のサイズを選択できます。

動画の縦横比率がワイドスクリーンサイズ(16:9)の場合は、560 × 315、640 × 360、853 × 480、1280 × 720 から選択、アナログTVサイズ(4:3)の場合は、480 × 360、640 × 480 等のサイズを選択します。それ以外のサイズも「カスタムサイズ」で設定できます。

youtube埋め込みコード 動画サイズ選択

カスタムサイズを選んだ場合は、横幅だけ入力すればOKです。縦横比率を自動的に計算して、元動画の比率に合わせた縦サイズが自動入力されます。自分のブログに合った横幅を入力してください。

youtube埋め込みコード カスタムサイズ

最後に埋め込みコードをコピーして編集画面に貼り付けると、設定した横幅の動画が表示されます。

YouTube動画埋め込み その他設定

下の項目にチェックを入れると、動画中のタイトルやプレーヤーの表示、再生終了後の関連動画表示ができます。

youtube埋め込みコード その他設定

選択できる項目は4つで、チェックを入れた項目はプレビューで動作を確認することができます。

プレーヤーのコントロールや動画のタイトルは、表示させてもカーソルを外すと後ろに隠れるようになっています。再生中にずっと表示されているわけではないので、チェックを入れても邪魔にはなりませんよ。

youtube 動画のタイトルとコントロール

動画が終わったら関連動画を表示する 動画の再生終了後に、関連する動画が表示されます。ここにチェックを入れると、関連動画だけでなく自分のアカウントにアップしている動画も表示されるので、自社製作動画の事例を見てもらいたい場合はチェックを入れましょう。
プレーヤーのコントロールを表示する 動画の下部に再生・停止ボタン、ボリューム調整、画質等のコントロールを表示します。視聴する側の利便性を考えると、ここはチェックを入れておくべき項目です。
動画のタイトルとプレーヤーの操作を表示する 動画の上部にタイトルと共有ボタンを表示します。なるべくここにもチェックを入れましょう。前述のとおり、カーソルを外すとタイトル等は後ろに隠れるので、表示させても邪魔にはなりません。
プライバシー強化モードを有効にする youtubeで用いるクッキーを制御します。クッキーとは訪問したサイトの情報をブラウザに保存する機能です。特に問題がなければチェックは必要ありません。

こちらも設定終了後に埋め込みコードをコピーして編集画面に貼り付けてください。

YouTube動画埋め込み 再生開始場所を指定

YouTube動画の埋め込みコードに秒数を追記すると、途中から再生を始めることができます。この機能はYouTube側で設定することができないので、出力されたコードに自分で追記する必要があります。

一例として、1分23秒の位置から動画を再生させる場合は、このようにしてコード内に追記します。

<iframe src="https://www.youtube.com/embed/●●●●●●●●●●●?start=83" frameborder="0" allowfullscreen>

赤の部分が追記したコードです。URLの後ろに「?」を付けて、開始秒数のパラメータ「start=83」を追加します。このパラメータは秒単位なので、1分23秒の場合は「start=83」、10分23秒なら「start=623」となります。

再生の終了位置も指定できます。開始と同じように「?」と終了秒数のパラメータ「end=623」を追加します。

<iframe src="https://www.youtube.com/embed/●●●●●●●●●●●?end=623" frameborder="0" allowfullscreen></iframe>

開始と終了を両方指定する場合、URL内で複数のパラメータを繋ぐための「&」を入れてください。

<iframe src="https://www.youtube.com/embed/●●●●●●●●●●●?start=83&end=623" frameborder="0" allowfullscreen></iframe>

これで埋め込まれた動画は、1分23秒の位置から再生され、10分23秒で終了になります。

YouTube動画埋め込み パラメータ追加

YouTubeには自動再生や繰り返し再生など、様々な操作が可能となるパラメータが用意されています。使用方法は開始位置の指定と同様で、埋め込みコードにパラメータを追記すればOKです。

興味がある方はこちらの開発者向けページをご覧ください。

YouTube 埋め込みプレーヤーとプレーヤーのパラメータ | YouTube IFrame Player API | Google Developers

あと、これはWordPress限定の機能ですが、YouTube動画のURLを編集画面にそのまま貼り付けると、動画が埋め込まれて表示されます。この「oEmbed」というメディア埋め込み機能はYouTubeのURLだけでなく、Twitterのツイートや、Flickr、Instagram、VineといったSNSや動画サービス等にも有効です。

ここでご紹介した通り、YouTube動画の埋め込みはそれほど難しくありません。YouTubeで見つけたお気に入り動画や面白い動画があれば、どんどんホームページやブログに埋め込んで公開してみてください。

アップしたYouTube動画をレスポンシブ表示に対応させるための方法をご紹介しています。よかったらこちらもご覧ください・・・

Youtube動画の埋め込みをレスポンシブ対応にする方法