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の倍数で分割して，ステップ表示できるようにしている。

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>

<p>

Δ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（お勧め）

ループ再生にする。関連動画を表示するタイミングがなくなりますが，終了時のタイミングでポーズをクリックする必要はあります。

例）リンクの場合

例）埋め込みの場合

対策2

関連動画を表示しないオプション「?rel=0」を追加すれば，他チャンネルの関連動画は表示されなくなります（が，マイチャンネルにアップした動画が，関連動画として表示されます）

例）リンクの場合

例）埋め込みの場合

Driveの動画を埋め込む

ドライブの動画をWebページに埋め込むには

共有リンク/はドライブから取得する共有リンクの末尾，view?usp=sharingを除いた部分，xxxとyyyは動画の縦横比のピクセル数。

動画をポップアップウインドウで表示する

絵文字にリンク

画像にリンクするには，imgタグにonclick以下のオプションをつける。

widthとheightを動画の縦横比に合わせると（3:4の動画の場合，xxxを640，yyyを480）隙間のない綺麗なポップアップウインドウになる。

Page updated

Google Sites

Report abuse