HTML5のiframeを使用してYouTube動画をループ再生する方法

2024-02-09 05:39 HTML5 iframe YouTube

まず、次のコードを使用してHTML文書を作成します:

<!DOCTYPE html>
<html>
<head>
  <title>YouTube動画のループ再生</title>
</head>
<body>
  <iframe width="560" height="315" src="https://www.youtube.com/embed/動画ID?playlist=動画ID&loop=1" frameborder="0" allowfullscreen></iframe>
</body>
</html>

上記のコードの中で、"動画ID"の部分を実際のYouTube動画のIDに置き換えます。YouTubeの動画ページから、URLの末尾にある動画IDをコピーして使用します。

src属性の値にhttps://www.youtube.com/embed/動画ID?playlist=動画ID&loop=1を指定しています。playlistパラメータとloopパラメータを使用することで、指定した動画IDの動画をループ再生することができます。

このコードを使用すると、指定したYouTube動画がループ再生されるiframeが表示されます。

もし、上記のコードを使っていくつかのYouTube動画をループ再生したい場合は、src属性の値を以下のように変更します:

src="https://www.youtube.com/embed/動画ID1?playlist=動画ID2,動画ID3,動画ID1&loop=1"

上記の例では、3つの動画ID（動画ID1、動画ID2、動画ID3）を指定しています。最後に指定した動画ID（動画ID1）がループ再生されます。

以上がHTML5のiframeを使用してYouTube動画をループ再生する方法です。この方法を使えば、シンプルかつ簡単にYouTube動画をループ再生することができます。