YouTube埋め込みコード生成ツール
YouTubeのURLを貼るだけで、ブログやWebサイト用の埋め込みコード(iframe)を作成します。開始・終了時間、自動再生、ループ、字幕、スマホ対応のレスポンシブ表示などをプレビューで確かめながら設定でき、「1分23秒から」のような時間指定リンクも作れます。
動画ページ・共有ボタン(youtu.be)・ショート・ライブ・再生リストのURL、11桁の動画ID、すでに使っている埋め込みコード(iframe)のどれでも貼り付けられます。
指定した時刻から再生が始まる共有用のリンクを作ります。SNSやメール、LINEで「この場面を見てほしい」と送るときに便利です。
「1:23」「0:01:23」「83」(秒)、「1分23秒」のように入力します。空欄なら時刻を指定しないリンクになります。
ショート動画のURL(/shorts/)は時刻の指定が効かないことがあるため、上のリンクは通常の動画ページの形式(watch?v=)にしています。下のURLは、ショート動画をシークバーや再生速度の変更が使える通常のプレーヤーで開きたいときにも使えます。
時間指定リンクのポイント
- youtu.be の短縮リンクは「?t=83」のように秒数で、通常のリンクは「&t=1m23s」のように分・秒で時刻を指定します。どちらも同じ位置から再生されます。
- 動画の長さより後の時刻を指定すると、正しく再生されないことがあります。
- ブログに動画そのものを貼るときは、「埋め込みコード」タブの開始時間を使います。
使い方
動画のURLを貼り付ける
YouTubeで埋め込みたい動画を開き、アドレスバーのURLか「共有」ボタンのリンクをコピーして入力欄に貼り付けます。ショート・ライブ・再生リストのURLや、11桁の動画IDでもかまいません。
再生方法とサイズを選ぶ
開始・終了時間、自動再生、ループ、字幕、サイズ(レスポンシブ/固定)などを選びます。変更はすぐにコードとプレビューに反映されます。迷ったら初期設定のままで大丈夫です。
コードをコピーして貼り付ける
「コードをコピー」を押し、ブログやWebサイトのHTMLに貼り付ければ完了です。WordPressでは「カスタムHTML」ブロックに貼ります。途中から再生される共有リンクが欲しいときは「時間指定リンク」タブを使います。
YouTube埋め込みコード生成ツールとは
YouTube動画を自分のブログやWebサイトに表示するためのHTML(iframeタグ)を作るツールです。YouTubeの「共有」→「埋め込む」で出るコードでは選べない、終了時間・ループ・字幕・プレーヤーの言語・キーボード操作の無効化や、スマホでもはみ出さないレスポンシブ表示などを、チェックを入れるだけで指定できます。iframe の属性は YouTube 公式のコードと同じものを使うので、そのまま安心して使えます。コードの生成はすべてブラウザの中で行われ、入力したURLがサーバーに送られることはありません。
特定の区間だけを何度も見返したいときはYouTubeリピート再生ツールが便利です。作った時間指定リンクをチラシやスライドで案内するなら、QRコード作成ツールでQRコードにできます。動画の説明欄に載せるチャプター(目次)はYouTubeチャプター作成ツールで作れます。自作サムネイルの見え方はYouTubeサムネイルプレビューツールで確認できます。
機能・特徴
- 公式の埋め込みより細かく設定開始時間に加えて、終了時間・ループ・字幕・プレーヤーの言語・全画面ボタンやキーボード操作の無効化まで、YouTubeの「埋め込む」画面にない項目も選べます。
- スマホでもはみ出さないレスポンシブCSSの aspect-ratio を使うシンプルな方式と、div で囲む従来の方式から選べます。ショート動画の縦長(9:16)や最大幅の指定にも対応しています。
- 実物のプレーヤーでプレビュー設定を変えると少し遅れてプレビューが更新され、開始位置やサイズ感をその場で確認できます。
- 時間指定リンクも作成「1分23秒から」のような共有リンクを、youtu.be の短縮形式と通常形式の両方で作ります。共有URLに付く追跡用のパラメータ(si=)は自動で取り除きます。
- 今の埋め込みコードを作り直せる使っている埋め込みコードを貼り付けると、開始時間や自動再生などの設定を読み取り、レスポンシブなどに作り直せます。
- ブラウザだけで完結コードの生成はすべてお使いのブラウザの中で行われます。入力したURLや設定が当サイトのサーバーに送られることはありません。
活用シーン
- ブログ記事やお知らせに、解説動画・商品紹介動画を貼る
- 長い動画の「見てほしい部分」だけを、開始・終了時間を決めて埋め込む
- 店舗サイトやLPのメインビジュアルで、ミュート+ループの雰囲気動画を流す
- スマホで読まれるページに、はみ出さないレスポンシブ表示で動画を載せる
- SNS・メール・LINEで「1分23秒から見てね」と時間指定リンクを送る
YouTube埋め込みの主なパラメータ
埋め込みURLの「?」のあとに「名前=値」を「&」でつないで指定します。当ツールでは、チェックを入れるだけでこれらを正しく書き出せます。
| 書き方 | 意味 |
|---|---|
start=83 | 83秒(1:23)の位置から再生を始めます。 |
end=165 | 動画の先頭から165秒(2:45)の位置で再生を止めます。 |
autoplay=1 | 自動再生します。多くのブラウザでは mute=1 と組み合わせたときだけ動作します。 |
mute=1 | ミュート(消音)で再生を始めます。 |
loop=1& | ループ再生します。1本の動画では playlist に同じ動画IDを指定します。 |
controls=0 | 再生ボタンやシークバーなどのコントロールを隠します。 |
cc_load_policy=1 | 字幕を最初から表示します。 |
cc_lang_pref=ja | 優先する字幕の言語を指定します(ISO 639-1 の言語コードなど)。 |
hl=en | プレーヤーのボタンやメニューの表示言語を指定します。 |
fs=0 | 全画面ボタンを表示しません。 |
disablekb=1 | プレーヤーのキーボード操作を無効にします。 |
playsinline=1 | iPhoneで全画面にせず、ページの中で再生します。 |
rel=0 | 関連動画を同じチャンネルの動画に限定します(非表示にはできません)。 |
videoseries? | 再生リストを埋め込みます。 |
modestbranding=1 / | 廃止済みで、今は指定しても効果がありません(modestbranding は2023年、showinfo は2018年に廃止)。 |
よくある質問
自動再生を設定したのに、動画が自動で再生されません。
動画をループ(繰り返し)再生させるには?
「rel=0」で関連動画を非表示にできますか?
プライバシー強化モード(youtube-nocookie.com)とは何ですか?
WordPressに貼り付けるにはどうすればいいですか?
スマホで見ると動画がはみ出したり、表示が崩れたりします。
開始時間・終了時間はどのように指定しますか?
埋め込んだ動画が表示されない・エラーになるときは?
ショート動画や再生リストも埋め込めますか?
このツールの更新履歴
-
追加
動画ツールを5つ追加:YouTubeチャプター作成、YouTubeサムネイルプレビュー、YouTube埋め込みコード生成、動画から静止画切り出し、動画GIF変換。