ブログにYouTube動画を埋め込み、サイズを調整して公開する方法をご紹介します。
方法はとても簡単、YouTubeから埋め込みコードを取得して、そのままブログに貼り付けるだけです。動画のサイズもブログの幅に合わせて自由に調整できます。
ブログ内のイメージ表現方法として、画像だけでなくYouTube動画が使えるようになると幅が広がりますよ。
YouTubeで動画の埋め込みコード取得
では、YouTubeから動画の埋め込みコードを取得してみましょう。まずは該当のYouTube動画を開きます。
「チャンネル登録」の下にある「共有」→「埋め込みコード」の順にクリックします。
youtube動画の埋め込みコードが表示されるので、そのまま全てコピーしてください。
あとはブログ編集画面で、YouTube動画を埋め込みたい場所にコードを貼り付けるだけです。
この埋め込みコードはHTML形式なので、アメブロやFC2ブログ、ライブドアブログ等のあらゆる無料ブログで使用可能です。もちろんWordPressや通常のホームページでも活用できますよ。
YouTube動画埋め込み 動画サイズ調整
続いて埋め込み動画のサイズを調整します。ブログによってはデフォルトのサイズで動画を埋め込むと、横幅が合わずにはみ出る場合があるので、動画のサイズを事前に調整します。
まずは埋め込みコードの下にある「もっと見る」をクリックします。
埋め込み動画のプレビューが表示されました。その左下にある「動画のサイズ」で大きさを調整します。
「動画のサイズ」をクリックすると、埋め込み動画のサイズを選択できます。
動画の縦横比率がワイドスクリーンサイズ(16:9)の場合は、560 × 315、640 × 360、853 × 480、1280 × 720 から選択、アナログTVサイズ(4:3)の場合は、480 × 360、640 × 480 等のサイズを選択します。それ以外のサイズも「カスタムサイズ」で設定できます。
カスタムサイズを選んだ場合は、横幅だけ入力すればOKです。縦横比率を自動的に計算して、元動画の比率に合わせた縦サイズが自動入力されます。自分のブログに合った横幅を入力してください。
最後に埋め込みコードをコピーして編集画面に貼り付けると、設定した横幅の動画が表示されます。
YouTube動画埋め込み その他設定
下の項目にチェックを入れると、動画中のタイトルやプレーヤーの表示、再生終了後の関連動画表示ができます。
選択できる項目は4つで、チェックを入れた項目はプレビューで動作を確認することができます。
プレーヤーのコントロールや動画のタイトルは、表示させてもカーソルを外すと後ろに隠れるようになっています。再生中にずっと表示されているわけではないので、チェックを入れても邪魔にはなりませんよ。
| 動画が終わったら関連動画を表示する | 動画の再生終了後に、関連する動画が表示されます。ここにチェックを入れると、関連動画だけでなく自分のアカウントにアップしている動画も表示されるので、自社製作動画の事例を見てもらいたい場合はチェックを入れましょう。 |
| プレーヤーのコントロールを表示する | 動画の下部に再生・停止ボタン、ボリューム調整、画質等のコントロールを表示します。視聴する側の利便性を考えると、ここはチェックを入れておくべき項目です。 |
| 動画のタイトルとプレーヤーの操作を表示する | 動画の上部にタイトルと共有ボタンを表示します。なるべくここにもチェックを入れましょう。前述のとおり、カーソルを外すとタイトル等は後ろに隠れるので、表示させても邪魔にはなりません。 |
| プライバシー強化モードを有効にする | 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動画をレスポンシブ表示に対応させるための方法をご紹介しています。よかったらこちらもご覧ください・・・
