今日もスマホに入れたブルースギター＆ボーカルをランダム再生しながらウォーキング。リズムに乗って快調に歩ける。折り返し点で休憩しているときに思った。こんなとき動画も同時に楽しめないかなと。 ブラウザで YouTube のページをブックマークする手もあるけど、アイコンだらけになってしまうのでうざったい。ワンタップで選曲できるアルバム的なものを作りたい、動画スクリーン以外の表示もなくしたい。 基本的に YouTube 動画の埋め込みは簡単。共有ボタンをクリックして「埋め込む」を選択すると表示されるコードをコピペすればよい。 ただ、ネットで調べたら、リファラ情報が正常に送られないと153エラーになることがあるという記事が多数あった。を参考にして、念のため次のとおりコードを一部編集する。 src="https://www.youtube.com/embed/xxxxx ➔ src="https://www.youtube-nocookie.com/embed/xxxxx さらに、レスポンシブ対応のため、PC とスマホとで CSS の記述を変える。スマホでは、下記のとおり、機種が変わってもアスペクト比を保ったまま幅が100%となるようにする。 HTML <div class="video-ut"><iframe src="https://www.youtube-nocookie.com/embed/xxxxx" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe<>/div> CSS .video-ut { position: relative; width: 100%; padding-top: 56.25%; } .video-ut iframe { position: absolute; top: 0;（下の行と合わせて "inset: 0;" としてもよい） left: 0; width: 100%; height: 100%; } CSS の仕様では、padding-top に指定した％は親要素の幅に対する割合となる。それを利用し、親要素（video-ut）に幅が100%、高さが幅の6/9=0.5625倍のスペースを作る。そして、子要素（動画 iframe）と親要素の左上をぴったり合わせ、子要素の幅と高さに100%を指定する。子要素の高さ100%は親要素の高さに等しいので、それは親要素の幅の56.25%となる。 上記を踏まえて、あくまでも個人用にビデオアルバムを作成した。追加削除は自由自在。スマホのブラウザにはアルバムだけをブックマークしておけばよい。 これで当初の思いどおりになったのだが、Wi-Fi 圏外ではギガの消費に留意しなくては。また、PC ではグラフィック処理装置に負荷をかけすぎるとモニターがブラックアウトするので、これも要注意。