Dropboxに保存した動画をサイトに埋め込む方法

Dropboxに保存した動画をブログやHPに埋め込む方法があります。

※動画を埋め込んだサイト（オンラインブランディング講座）　by　Leica M10

動画をサイトに埋め込む

「動画をサイトに埋め込む」とは、こんな感じで、サイト上でクリックすれば動画を再生できるようにすることです。

一方で、「動画にリンクする」というのは、このように、クリックしてその先で動画が見れるようにすることをいいます。

リンク

利便性から考えると、動画上でクリックして再生できるほうがいいでしょう。
私は、Dropboxに保存した動画を、サイトに埋め込んでいます。

冒頭の写真のサイトは、ご購入いただいた方限定のサイトです。

なお、サンプル動画は、YouTubeの最新動画。
続きは、こちらでご覧いただければ。

これもYouTubeの「埋め込み」です。
YouTubeの埋め込みだと、無料で、使い勝手もいいのですが、Dropboxを使っている理由もあります。

Dropboxに動画を保存するメリット

Dropboxは、Professionalというプランで契約しています。
年間2.5万円ほどで3TBという容量です。

容量は結構たっぷりあるので、動画を保存しておいても問題ありません。
Dropboxは、通常パソコンとクラウド上に同じデータを保存していますが、スマートシンクという機能を使えば、クラウド上にだけそのデータを保存し、パソコンのデータを使わずにすみます。

動画の容量は大きいので、このスマートシンクを使うと便利です。

YouTubeも、クラウド上に動画を保存でき、それを共有することもできます。
しかも無料、無制限です。
ただし、そのリンクを限定公開にし、ご購入いただいた方のみに提供するのは禁止されています。

動画を販売するなら、YouTubeは使えないのです。

その理由もあり、Dropboxに動画を保存しています。
（Vimeoというサービスを使う選択肢もありますが）

このDropboxでも、サイトへの埋め込みはできますので、その方法をまとめてみました。

Dropboxの動画をサイトに埋め込む方法

さきほどの埋め込んだ動画は、このようなコードで埋め込んでいます。

赤い部分がファイル名です。
（日本語ファイル名だとこのように長くなります）

まずは、このコードをWordPress の管理画面のテキストタブに入れ（スニペットツールで）、

<video controls width=”1000″>
<source src=”https://dl.dropboxusercontent.com”>
</video>

※1000という数字は、写真の幅です。
お好みで。

エクスプローラー（Windows）または、Finder（Mac）で、埋め込みたい動画ファイルを右クリックし、［Dropboxリンクをコピー］をクリックします。

その後、先ほどの定型文に貼り付け、次の部分を削除すると、冒頭のリンクとなり、

動画が埋め込まれます。
WordPressの投稿や固定ページの編集画面では表示されませんので、プレビューか実際の画面で確認しましょう。

使ってみていただければ。

 

---

■編集後記
昨日は朝、オンラインセミナーに参加

夜は、スーパーロボット大戦30の発表会をYouTubeで。
参戦作品にガンダム系が少ないのが残念ですが、楽しみです。

■1日1新→Kindle『1日1新』
とあるオンラインセミナー
スーパーロボット大戦30イベント

■娘(4歳3ヶ月）日記→Kindle『娘日記』
午後からお気に入りの公園へ。
暑くて途中で麦わら帽子を買いつつ、日陰で休みつつ。
麦わら帽子は、『となりのトトロ』のメイと同じものにしました。
ちょっと高かったのですが、かわいいのでよしとします。

公園ではうーたんというキャラのぬいぐるみを持っていき、スケッチしていました。
最近、スケッチが上手に。
いろんなキャラを書いています。