新潟県妙高市|ホームページと広告の相談相手

妙高Web屋

お仕事のご依頼お見積りのご依頼

ブログ

【YouTube】動画をHPやブログに埋め込む際のカスタマイズ方法

2019.6.5

【YouTube】動画をHPやブログに埋め込む際のカスタマイズ方法
ブログ 0 0
妙高Web屋LINE@ 友だち追加

皆さんは、「YouTubeの動画の埋め込み機能」を使ったことはありますか?

ブログやホームページをお持ちの方であれば、ご経験があるという方もいらっしゃるのでは。

記事執筆時点(2019年5月)では、ホームページやブログに埋め込みたい動画を個別に再生するページにおいて、動画の下の「共有」ボタンから「埋め込み」を選択してみてください。

表示される「iframeタグ」というものを、そのまま貼り付ければホームページやブログに埋め込むことが可能です。

(※埋め込みは著作権上問題ないとする考え方もありますが、動画チャンネルの運営者さんが埋め込みを禁止されていないかなど、自己責任でご確認のうえご利用になることをお勧めいたします。)

さて。

YouTubeの動画の埋め込み機能なのですが、動画の設定や表示内容に関して、少しカスタマイズができることをご存知でしょうか。

今回の記事は、「YouTubeの動画をホームページやブログに埋め込む際のカスタマイズ方法」のご紹介です。

この記事の目次

YouTubeの動画をホームページやブログに埋め込む際のカスタマイズ

YouTubeの動画をホームページやブログに埋め込むというのは、こういった状態のことです。

妙高Web屋のサーバー上に上記の動画のデータは存在していません。

YouTubeにアップロードしたものを、まるでホームページのコンテンツであるかのように表示することが可能です。

そして、こちらを実現しているのが、下記のコードです。


このコードを、ホームページの管理画面にペタッと貼り付けて「公開」ボタンを押すことで、上記の動画が再現されます。

そのうえで、動画の設定や表示形式をカスタマイズする場合には、src属性の値であるURLの後に「?」と「&」で変数を記述するという方法をとります。

ちょうど、このようなイメージです。

/*記事での説明のため一部の値を省略しています*/

変数名が「param_nameXX」で、それぞれ対応する値が「valueXX」です。

ここからは、具体的な変数をご紹介します。

YouTube埋め込み動画の「再生」に関する設定

autoplay(デフォルト:0)
読み込んだ時に動画を自動再生する(1)か、しない(0)かを決めます。
loop(デフォルト:0)
動画をループ再生する(1)か、しない(0)かを指定できます。
start
数値を指定します。その数値によって、開始のあと何秒進めた時点から動画を再生するかを設定します。
end
数値を指定します。その数値によって、開始から何秒過ぎた時点で動画を停止するかを設定します。

YouTube埋め込み動画の「表示」や「操作」に関する設定

disablekb(デフォルト:0)
動画をキーボードで操作できる(0)ままにしておくか、できない(1)ようにするかを決めます。
fs(デフォルト:1)
フルスクリーンモードにできる(1)か、できない(0)かを指定できます。
modestbranding
この値を「1」にすると、YouTubeのロゴを非表示にできます。
rel(デフォルト:1)
動画の再生終了時に、関連動画を表示する(1)か、表示しない(0)かを指定できます。
showinfo(デフォルト:1)
動画の再生が始まる前に、タイトルやアップロードユーザーなどの情報を表示する(1)か、表示しない(0)かを指定できます。

ページの先頭へ戻る

参考サイト:YouTube 埋め込みプレーヤーとプレーヤーのパラメータ(developers.google.com より)

今回の記事を作成するにあたり、こちらのページを参考にさせていただきました。

ありがとうございました!

ページの先頭へ戻る

こちらの記事に感想をお寄せください

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
妙高Web屋LINE@ 友だち追加
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ