【YouTube】オリジナル再生リストの作り方

text.sakura.ne.jp【公式】

2022年8月28日 06:47

はじめに

『“動画再生画面”付きYouTube再生リスト』の作り方をまとめました。
画面の左側に｢動画再生画面(iframe)｣、画面の右側に｢再生リスト(動画リスト)｣が表示されます。

《もくじ》
■ 表示例
■ 作り方
■ 使い方
■ ソースコード

■ 表示例

下記のソースコードをコピーしてWEBブラウザのアドレスバーに入力すると『“動画再生画面”付きYouTube再生リスト』が表示されます。

【パソコン版】

data:text/html;charset=utf-8,
<html><head><style type="text/css">
*{margin:0;padding:0;border:0;font-size:0;}iframe{display:inline-block;width:70%;height:100%;}div{display:inline-block;width:30%;height:100%;overflow-y:scroll;}a>img{width:100%;}a+a>img{border-top:4px solid %23ccc;}
</style></head><body>
<iframe name="play" src="https://www.youtube.com/embed/3kPH7kTphnE"></iframe>
<div>
<a target="play" href="https://www.youtube.com/embed/3kPH7kTphnE?autoplay=1"><img src="https://i.ytimg.com/vi/3kPH7kTphnE/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/VW5Rxfj_Sow?autoplay=1"><img src="https://i.ytimg.com/vi/VW5Rxfj_Sow/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/6yby4jsEiIw?autoplay=1"><img src="https://i.ytimg.com/vi/6yby4jsEiIw/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/9UjyY3uyan0?autoplay=1"><img src="https://i.ytimg.com/vi/9UjyY3uyan0/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/67HzXjOX6L4?autoplay=1"><img src="https://i.ytimg.com/vi/67HzXjOX6L4/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/X4ABxxkx6YU?autoplay=1"><img src="https://i.ytimg.com/vi/X4ABxxkx6YU/hqdefault.jpg"></a>
</div></body></html>

【スマートフォン版】

data:text/html;charset=utf-8,<html><head><style%20type="text/css">*{margin:0;padding:0;border:0;font-size:0;}iframe{display:inline-block;width:70%;height:100%;}div{display:inline-block;width:30%;height:100%;overflow-y:scroll;}a>img{width:100%;}a+a>img{border-top:4px%20solid%20%23ccc;}</style></head><body><iframe%20name="play"%20src="https://www.youtube.com/embed/3kPH7kTphnE"></iframe><div><a%20target="play"%20href="https://www.youtube.com/embed/3kPH7kTphnE?autoplay=1"><img%20src="https://i.ytimg.com/vi/3kPH7kTphnE/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/VW5Rxfj_Sow?autoplay=1"><img%20src="https://i.ytimg.com/vi/VW5Rxfj_Sow/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/6yby4jsEiIw?autoplay=1"><img%20src="https://i.ytimg.com/vi/6yby4jsEiIw/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/9UjyY3uyan0?autoplay=1"><img%20src="https://i.ytimg.com/vi/9UjyY3uyan0/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/67HzXjOX6L4?autoplay=1"><img%20src="https://i.ytimg.com/vi/67HzXjOX6L4/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/X4ABxxkx6YU?autoplay=1"><img%20src="https://i.ytimg.com/vi/X4ABxxkx6YU/hqdefault.jpg"></a></div></body></html>

このサンプル版では渋谷のライブカメラ動画などが表示されます。

■ 作り方

下記ソースコード内の｢動画ID(●●●)｣の箇所を｢好きな動画ID｣に変更すれば再生リストが完成します。

《動画IDの例 (太字の箇所) 》
好きなことで、生きていく - HIKAKIN - YouTube TVCM - YouTube
https://www.youtube.com/watch?v=X4ABxxkx6YU

■ 使い方

下記のソースコードをコピーしてWEBブラウザのアドレスバーに入力すると『“動画再生画面”付きYouTube再生リスト』が表示されます。

■ ソースコード

｢動画ID(●●●)｣の箇所を｢好きな動画ID｣に変更して下さい。

【パソコン版】

data:text/html;charset=utf-8,
<html><head><style type="text/css">
*{margin:0;padding:0;border:0;font-size:0;}iframe{display:inline-block;width:70%;height:100%;}div{display:inline-block;width:30%;height:100%;overflow-y:scroll;}a>img{width:100%;}a+a>img{border-top:4px solid %23ccc;}
</style></head><body>
<iframe name="play" src="https://www.youtube.com/embed/●●●"></iframe>
<div>
<a target="play" href="https://www.youtube.com/embed/●●●?autoplay=1"><img src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/●●●?autoplay=1"><img src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/●●●?autoplay=1"><img src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/●●●?autoplay=1"><img src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a>
<a target="play" href="https://www.youtube.com/embed/●●●?autoplay=1"><img src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a>
</div></body></html>

【スマートフォン版】

data:text/html;charset=utf-8,<html><head><style%20type="text/css">*{margin:0;padding:0;border:0;font-size:0;}iframe{display:inline-block;width:70%;height:100%;}div{display:inline-block;width:30%;height:100%;overflow-y:scroll;}a>img{width:100%;}a+a>img{border-top:4px%20solid%20%23ccc;}</style></head><body><iframe%20name="play"%20src="https://www.youtube.com/embed/●●●"></iframe><div><a%20target="play"%20href="https://www.youtube.com/embed/●●●?autoplay=1"><img%20src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/●●●?autoplay=1"><img%20src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/●●●?autoplay=1"><img%20src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/●●●?autoplay=1"><img%20src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/●●●?autoplay=1"><img%20src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a><a%20target="play"%20href="https://www.youtube.com/embed/●●●?autoplay=1"><img%20src="https://i.ytimg.com/vi/●●●/hqdefault.jpg"></a></div></body></html>

スマートフォンの場合、｢ソースコードを1行にすること｣と｢ソースコード内の空白スペースを%20に変換すること｣が必要です。

#私の作品紹介 / #プログラミング初心者

（text）

◇　　◇　　◇

《過去に作成したnoteの記事リスト》
https://note.com/text_sakura/n/na2cd73291236

《記事についてのお問い合わせ先》
text.sakura.note@gmail.com
※ 添付ファイルが含まれるメールは受け取ることができません。
※ テキストのみでお願いいたします。

この記事が参加している募集

#私の作品紹介

105,029件

この記事が気に入ったらサポートをしてみませんか？