【Tips】はてなブログに動画を埋め込む

toyamadori.hatenablog.com

こちらの記事で初めて試したのですが少し引っかかったのでメモ。

2024/02/10現在のGoogleドライブを使った手順です。

Googleドライブ上での操作

1. Googleドライブに動画をUpload
2. ︙ボタン → 共有 → 共有を押下
   
3. 一般的なアクセス → 制限付きからリンクを知っている全員にする
   
4. ⚙ボタンを押下し、以下2つのチェックボックス（☑）のチェックが外れた状態（画像の状態）にする
   
5. ←を押下して3の画面に戻り、完了を押下
6. 動画をダブルクリックで開く
7. 右上の︙ボタン → 新しいウィンドウで開くを押下
   
8. 新しいウィンドウ上で右上の︙ボタン → アイテムを埋め込むを押下
   
9. 表示されるコードをコピーする
   

はてなブログ上での操作

普通に貼り付けるだけでも良いですが、このひと手間加えないと縦横比が崩れます！！

ブログの編集エディタ上にコピーしたコードを貼り付け、以下のように書き換える

<div style="position: relative; aspect-ratio: 16 / 9; max-width: 600px">
  <iframe src="https://drive.google.com/file/********" width="100%" height="100%" allow="autoplay"></iframe>
</div>

1. <div ...></div>（↑の1行目と3行目をコピペ）で<iframe ...>...</iframe>囲む
2. iframeの部分はwidthとheightを100%に書き換える

動画の縦横比は16 / 9の部分。縦長の場合は9 / 16、4:3の場合は4 / 3といった具合に書き換える

以上です！お役に立てば幸いです🙇