【WordPress】iframeでYouTube動画を埋め込んだ際に一定時間無操作だと動画が消える件について

どうも。みずかず(@mizukazu_1)です。

先日、業務でYouTubeの動画をiframeで埋め込む実装をした際にタイトルのような現象に出くわしたので忘れないようにメモしておこうと思います。

正直原因が分からないので、分かり次第追記します。

とりあえずは状況とその時の対応策について書きます。

概要

WordPressで構築されたWEBサイトにYouTubeの動画を埋め込みたいとの事だったのでiframeを使って実装しました。

普通にYouTube動画の共有ボタンからiframeのタグを取得してサイトに埋め込んだわけですが、一定時間操作をしないとiframeタグそのものが消えてしまうというものです。

なので、動画を見始めても1分くらいすると消えてしまうので動画も見れなくなってしまいます。

対応策

原因を探る為に色々調べたのですが、同じ現象に出くわしている人が見当たりませんでした。
もしかしたら案件固有のものかも?

他に保守しているサイトでYouTubeの動画を埋め込んでいるサイトがあったのでそこのソースコードを持ってきて対応したら動画が消えることも無くなりました。

<iframe width="560" height="315" src="URL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

上記のように書いていたものを下記のように変更します。

divを2つ使ってラップ。

<div class="iframe_area">
  <div class="iframe_wrap">
    <iframe width="560" height="315" src="URL" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>

ラップしたdivとiframeに下記のcssを当てます。

.iframe_area {
  width: 728px;
  max-width: 100%;
  text-align: center;
  margin: 40px auto 0;
} 
.iframe_area .movie_wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  margin-top: 23px;
}
.iframe_area .movie_wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

これで正常に動作するようになりました。

原因が分からないのでモヤモヤする部分もありますがとりあえずは無事に解決できて良かったです。

原因や解決策が分かったら随時記載していこうと思います！