YouTube埋め込みコード作成ツール

無料のYouTube埋め込みコード作成ツールについて

無料のYouTube埋め込みコード作成ツールは、あらゆるYouTubeのリンクを、そのまま使えるきれいなHTMLに数秒で変換します。watch URL、youtu.beの短縮リンク、Shortsのリンク、11文字の動画IDのいずれかを貼り付けると、開始時間、自動再生、ミュート、ループ、コントロール非表示、プライバシー強化モードなど、選んだプレーヤーオプションを反映した有効なiframeをすぐに作成します。

最大の特長は、初期設定で有効になっているレスポンシブなYouTube埋め込みモードです。スマートフォンで横にはみ出す固定幅のiframeではなく、プレーヤーをpadding-bottomを使ったコンテナで包み、どの画面幅でも16:9の比率を正確に保ちます。これはプロのパブリッシャーも使っている手法で、JavaScriptなしで最新のブラウザすべてで動作します。

プライバシーにも配慮しています。チェックボックスを1つ切り替えるだけで、埋め込みコードがYouTubeのプライバシー強化ドメインであるyoutube-nocookie.comに切り替わり、訪問者が実際に動画を再生するまでトラッキングCookieが遅延されます。GDPRを意識するサイトでは一般的な要件です。遅延読み込みを有効にすると、loading="lazy"属性が追加され、iframeはスクロールして表示されたときにだけ読み込まれるため、ページ速度とCore Web Vitalsが向上します。

主な機能

• 一般的なYouTube URL形式をすべてサポート: watch、youtu.be、Shorts、embed、live、動画IDのみの入力
• 初期設定でレスポンシブな16:9のラッパーが有効なので、モバイル、タブレット、パソコンで動画が拡縮します
• 正確なサイズが必要なときに使える固定サイズのプリセット(560x315、640x360、853x480、1280x720)
• 開始時間はh:mm:ss、mm:ss、秒数のいずれかで入力でき、正しいstartパラメータに変換されます
• 自動再生、ミュート、ループ、コントロール非表示を切り替えると、コードがその場で再生成されます
• youtube-nocookie.comを使ったプライバシー強化モードで、Cookieによるトラッキングを抑えます
• ページを高速化し、Core Web Vitalsのスコアを改善する遅延読み込みオプション
• オプションを変更するたびに更新されるライブプレーヤープレビュー(プレビューでは自動再生はオフのままです)
• すべてのiframeにtitle属性とallowfullscreenを付けた、アクセシビリティに配慮した出力
• 1クリックでクリップボードにコピー、登録不要、完全無料

YouTube埋め込みコード作成ツールの使い方

1. リンクを貼り付け: YouTubeのURLまたは11文字の動画IDを入力欄に貼り付けます。動画IDは自動的に検出されます。
2. オプションを選択: 開始時間を設定し、自動再生、ミュート、ループ、コントロール非表示、プライバシー強化モードを切り替えます。コードはその場で更新されます。
3. サイズを選択: 流動的なレイアウトにはレスポンシブなラッパーをそのまま使い、固定サイズにしたい場合はオフにして560x315や1280x720などを選びます。
4. プレビューを確認: 右側のライブプレーヤーで、埋め込みの動作をそのまま確認できます。ページが静かなままになるよう、自動再生だけは除かれます。
5. コピーして貼り付け: 「コードをコピー」をクリックし、HTMLをウェブサイト、ブログ記事、またはCMSのHTMLブロックに貼り付けます。

活用例

• ブロガー: モバイルに対応したレスポンシブなコードで、チュートリアルやレビュー動画をWordPress、Ghost、静的サイトの記事に埋め込めます。
• ウェブ開発者: 毎回手書きする代わりに、遅延読み込み付きの一貫した標準準拠のiframeマークアップを生成できます。
• 講座の制作者: レッスン動画を正確なタイムスタンプから埋め込めば、受講者は毎回目的の場面にたどり着けます。
• マーケティングチーム: コントロールを非表示にして、ランディングページにすっきりした見た目の製品デモを追加できます。
• GDPR対応サイトを扱う代理店: ヨーロッパのクライアントのサイト向けに、プライバシー強化のyoutube-nocookie.com埋め込みを納品できます。
• ドキュメント執筆者: レイアウトを崩さずに、ヘルプセンターやナレッジベースに手順解説動画を組み込めます。
• ニュースレターの発行者: 動画に対応しているニュースレターのウェブ版向けに、埋め込みを作成できます。
• 小規模事業者: 開発者を雇わなくても、ホームページのヒーローセクションにループ再生のミュート済みプロモーション動画を設置できます。

よくある質問

ヒントとベストプラクティス

• レスポンシブなラッパーをオンにしておく: ウェブのトラフィックの半分以上はモバイルからで、幅560pxの固定iframeはほとんどのスマートフォンの画面からはみ出します。
• ファーストビューより下では遅延読み込みを使う: YouTubeのiframeは1つにつき数百キロバイトを読み込みます。loading="lazy"を指定すると、プレーヤーが実際に表示されるまでその負荷を先送りできます。
• 長い動画には開始時間を設定する: 視聴者を該当の場面に直接案内すると、離脱が減り、コンテンツを見続けてもらいやすくなります。
• プライバシー強化モードを選ぶ: 視聴者にデメリットはなく、EUからのアクセスがあるサイトではCookie同意の対応が簡単になります。
• title属性を残す: スクリーンリーダーが読み上げる属性で、Lighthouseなどのアクセシビリティ監査では、title属性のないiframeが指摘されます。
• 貼り付けた後にテストする: CMSによっては、ビジュアルモードでiframeが削除されます。コードはHTMLブロックまたはコードブロックに貼り付けると、そのまま保持されます。