リンクをコピーしました

Googleドライブのファイルをブログに埋め込む手順（共有設定と iframe）

はじめに

自分のブログに、Google ドライブに置いたファイル（動画など）をそのまま載せたい！となったときに、

ブラウザ上での操作と、やり方が分かりづらかったのでここに纏めます！
同じようにお困りの方に役立つ記事になっているはずです。

1. ドライブ上で「共有」を開く

対象のファイルを右クリックし、共有 を選びます（サブメニューが出る場合は、そこから 共有 をクリック）。

Google ドライブでファイルを右クリックし「共有」を選ぶ

2. 「リンクを知っている全員」＋閲覧者にしてリンクをコピー

共有ダイアログで 一般的なアクセス を リンクを知っている全員 にし、権限は 閲覧者 のままにします。
問題なければ リンクをコピー を押します。

共有設定を「リンクを知っている全員」「閲覧者」にし、リンクをコピー

コピーされるURL は、だいたい次のような形です。

10N111TfBknfp_dIsVGqegf-SINLpzDKCの部分はファイルごとに異なります

https://drive.google.com/file/d/10N111TfBknfp_dIsVGqegf-SINLpzDKC/view?usp=sharing

3. この URL のままでは埋め込めない

上の view 用リンクはブラウザで開いて閲覧するためのもので、そのまま <iframe> の src にしても期待どおり埋め込まれないと思います。
埋め込み用には、/preview 付きの URL を使います。

方法 A: URL を自分で iframe に組み立てる

view?usp=... の部分をやめて、次の形式にします。

<iframe
  src="https://drive.google.com/file/d/FILE_ID/preview"
  width="640"
  height="480"
></iframe>
  • FILE_ID は、元のリンク .../file/d/FILE_ID/view... に含まれている同じ ID をそのまま使います。
  • width / height はサイトのレイアウトに合わせて調整してください（CSS で max-width: 100% などを併用すると安全です）。

Astro の Markdown / MDX では、プロジェクトの方針に合わせてそのまま HTML を書くか、コンポーネント化するかを選べます。

方法 B: ドライブの「埋め込みリンクを取得」でコードをコピーする

ブラウザでファイルを開く

コピーした view 用の URL をブラウザで開くと、Drive のプレビュー画面になります。

メニューから埋め込み用 HTML を取得

画面上部の ファイル → 共有 → 埋め込みリンクを取得 を選びます。

プレビュー画面で ファイル → 共有 → 埋め込みリンクを取得

表示された iframe をコピー

「ファイルを埋め込む」のようなダイアログに、次のような 完成した iframe タグ が表示されるので、そのままコピーしてサイトに貼り付けます。

埋め込み用の iframe HTML が表示されるダイアログ

サンプル

<iframe
  src="https://drive.google.com/file/d/FILE_ID/preview"
  width="640"
  height="480"
></iframe>

実際に埋め込みコードを使った見え方

まとめ

  1. ドライブでファイルを リンクを知っている全員 / 閲覧者 にし、リンクをコピーする。
  2. 埋め込みには https://drive.google.com/file/d/FILE_ID/preview を iframe の src に使う。
  3. 手で組み立てるか、プレビュー画面の ファイル → 共有 → 埋め込みリンクを取得 で HTML をコピーする。

それでは！