施設紹介動画が完成したタイミングで、「ホームページにYouTube動画を埋め込みたい」というご相談をいただきました。
あわせて、動画を最後まで再生したあとに、自動で最初から再生される仕様にしたいというご要望もあり、設定を含めた対応を行っています。

今回の対応では、YouTube埋め込み用のパラメータ調整と、スマートフォンでも見やすいようレスポンシブ対応を実施しました。
特別なプラグインは使用せず、YouTube公式の仕様に沿った方法で実装しています。

動画を活用した施設紹介は、写真だけでは伝わりにくい雰囲気や動線を伝えられるため、近年ご相談が増えている内容のひとつです。

今回のご相談内容

今回いただいたご相談は、次のような内容でした。

施設紹介用の動画をYouTubeにアップしたので、ホームページ内に埋め込みたい。
その際、動画を最後まで視聴したあとに、自動的に最初から再生されるようにしてほしい。

単に動画を表示するだけでなく、ループ再生の挙動まで含めた実装をご希望されていました。

発生していた症状・エラー内容

今回のケースでは、エラーが出ていたわけではありません。

ただし、通常のYouTube埋め込みコードでは、動画再生が終了すると停止してしまい、自動で最初に戻って再生される動作にはなりません。

そのため、標準の埋め込みコードのままではご要望の挙動を実現できない状態でした。

原因の特定ポイント

YouTubeの埋め込み動画は、URLのパラメータ設定によって再生挙動が変わります。

今回ポイントとなったのは以下の2点です。

• loopパラメータだけではループ再生にならない
• playlistに動画IDを指定する必要がある

この仕様を正しく設定しないと、「ループ指定をしているつもりでも再生されない」という状態になります。

実際に行った対応内容

今回は、YouTube公式仕様に沿って以下のパラメータを設定しました。

• loop=1
• playlist=動画ID

この2つを組み合わせることで、動画が最後まで再生されたあと、自動的に最初から再生される挙動になります。

また、あわせて以下の対応も行っています。

• iframe埋め込みのサイズ調整
• スマートフォン・タブレット表示を考慮したレスポンシブ対応

画面サイズが変わっても動画がはみ出したり、横スクロールが発生しないよう調整しました。

対応後の結果・改善点

対応後は、以下の点が改善されています。

動画を最後まで再生すると、自動的に最初から再生されるようになりました。
パソコン・スマートフォンのどちらから見ても、画面幅に合わせて自然に表示されます。

施設紹介動画をページ内で繰り返し視聴できるようになり、閲覧者が内容を理解しやすい構成になりました。

今回の対応から分かったこと

YouTubeの埋め込みは、一見すると簡単そうに見えますが、再生方法や表示挙動によって設定が大きく変わります。

特に、

• 自動再生
• ループ再生
• レスポンシブ表示

といった要素は、標準コードだけでは実現できないケースが多くあります。

目的に合わせたパラメータ設定が重要だと、改めて感じた対応でした。

同様のトラブルを防ぐために

YouTube動画をホームページで活用する際は、次の点を事前に確認しておくと安心です。

• どのような再生挙動にしたいか（停止・自動再生・ループなど）
• スマートフォン表示を想定しているか
• 複数動画を掲載する予定があるか

目的が明確になることで、無駄な修正や再作業を防ぐことができます。

「とりあえず埋め込む」ではなく、見せ方まで含めて考えることが大切です。

メディアプライムスタイルのサポートについて

メディアプライムスタイルでは、今回のようなYouTube埋め込み対応をはじめ、動画表示の調整やレスポンシブ対応、既存ページへの安全な組み込み作業などもサポートしています。

ちょっとした設定の違いで見え方や動きが大きく変わることも多いため、「これってできるのかな？」と感じた段階でご相談いただくのがおすすめです。

ホームページをより伝わる形に整えるお手伝いとして、今後も一つひとつ丁寧に対応していきます。