概要

OneDriveの画像と動画をブログなどのWebサイトに埋め込む方法を紹介します。

HTMLに画像を埋め込む

①OneDrive上にある画像を右クリックし、埋め込みを選択

②サイドメニューの生成をクリックしたあと、HTMLタグを含めるにチェックを入れ、URLをコピーして画像を埋め込む欄のコードをコピ＆ペースト

HTMLに動画を埋め込む

OneDriveの動画を貼るには少し手順が必要です。「HTMLに埋め込む」のコードをそのまま貼っても上手く機能しないみたいです。

いろいろと検証した結果、以下の方法が良さそうです。

① 画像と同じ手順で、動画を右クリック > 埋め込むのソースコードをコピー

取得したソースコード

<iframe src="https://onedrive.live.com/embed?cid=791DED50129E0A28&resid=791DED50129E0A28%21649122&authkey=ADyvED30SLNyjkM" width="320" height="180" frameborder="0" scrolling="no" allowfullscreen></iframe>

②ソースコードのsrcの部分を抜き出してembedをdownloadに変更

embedをdownloadに変更

<iframe src="https://onedrive.live.com/embed?cid=...

↓

<iframe src="https://onedrive.live.com/download?cid=...

変更結果

https://onedrive.live.com/download?cid=791DED50129E0A28&resid=791DED50129E0A28%21649122&authkey=ADyvED30SLNyjkM

③ブログに<video>タグを設置

<video src="https://onedrive.live.com/download?cid=791DED50129E0A28&resid=791DED50129E0A28%21649122&authkey=ADyvED30SLNyjkM"></video>

設置した例↓

まとめ

今回はOneDriveの画像や動画をWebサイトに載せる方法の紹介でした。

「動画の埋め込み」に関しては少し手間をかけないといけませんが、できるようになると非常に便利です。

OneDriveなどのクラウドストレージに資源を置けば何かと便利ですので、まだ使ったことがない方には今回の記事のように活用してみると良いでしょう。