![見出し画像](https://assets.st-note.com/production/uploads/images/105453255/rectangle_large_type_2_d16340462088d95f16a3f18656e6bd55.png?width=1200)
Googleサイトで作るグループウェア(45)ーYoutubeライブTVをつくる復活編②ー
この記事を読んで欲しい方
Youtubeをよく見ている方々
Googleサイトに興味を持っている方々
①GoogleサイトにYoutube動画を埋め込む
さて、引き続き進めていきます。
まず、GoogleサイトにYoutube動画を埋め込む基本ですが、挿入>YouTubeで出てきたYoutube検索ボックスに、埋め込みたいYoutubeのURLをコピーして入れると、
![](https://assets.st-note.com/img/1683953292145-60Clj37om3.png?width=1200)
動画が検索されてくるので、選択して選択ボタンを押せば、
![](https://assets.st-note.com/img/1683953419451-GbLXqXX5EK.png?width=1200)
画面に配置されます。
![](https://assets.st-note.com/img/1683953451348-wlRkhD0e02.png?width=1200)
ただし、このやり方だと、
①再生リスト(プレイリスト)が埋め込めない
②ライブチャンネルの追跡がうまくできない
③チャンネル内の最新アップロードの動画が見れない
という制限が発生します。
②再生リスト(プレイリスト)埋め込み用の雛形
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
font-family: sans-serif;
}
body::-webkit-scrollbar {
display: none;
}
a {
text-decoration: none;
}
.iframe-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<center>
<div class="iframe-wrapper">
<iframe width="800" height="640"
src="ここにURLを入れる"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</center>
</body>
</html>
これが再生リスト(プレイリスト)埋め込み用の雛形です。
実際は、下の方の<iframe></iframe>の中を書き換えることで、色々なチャンネルの再生リストを表示させることができます。
実際に書き換える部分はsrc=" "の中の「ここにURLを入れる」部分だけです。
ここに埋め込むURLは、再生リストの共有をクリックして、
![](https://assets.st-note.com/img/1683954493898-MOcdzRxdnH.png?width=1200)
埋め込むという丸いボタンをクリックすると出てきます。
ここのsrc=" "の中をコピーします。
![](https://assets.st-note.com/img/1683954538649-rZXe18ZeCs.png?width=1200)
以下が、コピーされたものです。
https://www.youtube.com/embed/videoseries?
list=PLVpbvf6f1tabMMRdeixRE_sGGebk-Om_J
更にこのURLの後ろに以下のテキストを追加します。
&mute=1&autoplay=1
これは、mute=1は音声をミュート、autoplay=1は自動再生するという意味です。
注意しなければならないのは、YouTube動画を埋め込んだ場合の仕様として、必ずミュートしないと自動再生は動きません。
これは、画面を開いていきなり音が出てしまうことを防ぐためのYouTubeの仕様で、変更はできません。
③埋め込むhtmlコード
以下のようにhtmlコードができましたので、挿入>埋め込む>埋め込みコードの中に貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style type="text/css">
body {
font-family: sans-serif;
}
body::-webkit-scrollbar {
display: none;
}
a {
text-decoration: none;
}
.iframe-wrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.iframe-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<center>
<div class="iframe-wrapper">
<iframe width="800" height="640"
src="https://www.youtube.com/embed/videoseries?
list=PLVpbvf6f1tabMMRdeixRE_sGGebk-Om_J&mute=1&autoplay=1"
title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</center>
</body>
</html>
保存すると、画面上に動画が表示され、すぐに動き出します。(最初は音はミュートされていますが、手動で解除できます。)
![](https://assets.st-note.com/img/1683955669997-MyPDQld1zn.png?width=1200)
後は、公開ボタンを押して保存して下さい。
④再生リストの使い方
埋め込まれた再生リストですが、画面右上にリスト表示用のアイコンが出てくるので、そこをクリックすると、
![](https://assets.st-note.com/img/1683955757031-fnjP31d9WH.png?width=1200)
再生順に動画のリストが出てきます。(ただし、シャッフルはできませんのでご注意下さい。)
![](https://assets.st-note.com/img/1683955792149-M4nQbzTsR0.png?width=1200)
この再生リストに、新しく動画が入っても、一番上の動画から再生されるので、URLを更新し直す必要はありません。
さて、今回はここまでです。
次回は、ライブチャンネルを追跡する埋め込みです。(続く)
![](https://assets.st-note.com/img/1683956665764-8uAzhEE9ku.png?width=1200)