Movies in Google
(2020.7.30, 2022.10.27)
youtube.comとyoutu.be
youtubeのURLにyoutube.comとyoutu.beの2種類ありますが，youtube.comが正式URLでyoutu.beはその短縮URLです。
YoutubeプレーヤーAPIを使う
動画を埋め込むには
Youtubeに埋め込みたい動画をアップして，「リンクを知ってる人だけが見ることのできる」限定公開にする。
HTMLに（Google Siteの場合は[挿入]-[埋め込む]，[埋め込むコード]タブをクリックして），以下のコードを貼り付ける。
2行目: YoutubeのVideoIDを入れる。
PlayerVers: に続くブロック内で，プレーヤーのパラメタを設定できる。
ytPlayer.でプレーヤーのAPIを呼び出せる。この例では，再生時間Tを整数で12の倍数で分割して，ステップ表示できるようにしている。
<script>
vid = '5o0LGmtIbDM' // YouTubeのID
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
ytPlayer = new YT.Player(
'sample', // 埋め込む場所の指定
{
width: '100%', //448, // 幅(デフォルト640)
height: '100%', //273, // 高(デフォルト390)
videoId: vid,
playerVars: {
playlist: vid, // YouTubeのID
rel: 0, //関連動画を表示しない
loop: 1,
controls: 0,
enablejsapi: 1
}
}
);
}
function skip(pm) {
ytPlayer.pauseVideo();
var n=12*document.getElementById('m').value;
var t=ytPlayer.getCurrentTime();
var a=ytPlayer.getDuration();
var dt=a/n;
var i=Math.round((t/a)*n);
var ii=(i+n+pm)%n;
var u=ii*dt;
ytPlayer.seekTo(u,true);
}
</script>
<div id="sample"></div>
<p>
<button onclick="skip(-1)">-Δt</button>
<button onclick="skip(1)">+Δt</button>
Δt=T/12/<INPUT type="text" id="m" size="4" value=10>
</p>
なお，Google ドライブにアップした動画は，<iframe>タグで埋め込むことができるが，上記APIを使うことはできないようである。その際，iframeのsrcには，Google ドライブから取得したリンクを?の手前まで書き，必要なら?に続けて，パラメタ1=xxx&パラメタ2=yyyのようにプレーヤーのパラメタを指定する。
Youtubeの関連動画を表示しない
Youtubeの動画を再生すると，再生終了時に，自分の視聴傾向から判定される関連動画が表示されてしまいます。
対策1（お勧め）
ループ再生にする。関連動画を表示するタイミングがなくなりますが，終了時のタイミングでポーズをクリックする必要はあります。
例）リンクの場合
<a href="https://youtube.com/embed/5o0LGmtIbDM?loop=1&playlist=5o0LGmtIbDM">
例）埋め込みの場合
<iframe width="448" height="273" src="https://youtube.com/embed/5o0LGmtIbDM?loop=1&playlist=5o0LGmtIbDM"></iframe>
対策2
関連動画を表示しないオプション「?rel=0」を追加すれば，他チャンネルの関連動画は表示されなくなります（が，マイチャンネルにアップした動画が，関連動画として表示されます）
例）リンクの場合
<a href="https://youtube.com/embed/5o0LGmtIbDM?rel=0"></a>
例）埋め込みの場合
<iframe width="448" height="273" src="https://youtube.com/embed/5o0LGmtIbDM?rel=0"></iframe>
Driveの動画を埋め込む
<iframe src="共有リンク/preview?usp=drivesdk" width="xxx" height="yyy"></iframe>
共有リンク/はドライブから取得する共有リンクの末尾，view?usp=sharingを除いた部分，xxxとyyyは動画の縦横比のピクセル数。
動画をポップアップウインドウで表示する
絵文字にリンク
<span onclick="window.open('URL', 'ウィンドウタイトル','width=xxx,height=yyy');" style="cursor: pointer;">🎥</span>
画像にリンクするには，imgタグにonclick以下のオプションをつける。
widthとheightを動画の縦横比に合わせると（3:4の動画の場合，xxxを640，yyyを480）隙間のない綺麗なポップアップウインドウになる。