はるのぶろぐ。

情報系大学生ハルが、ゆるゆるとIT関係についてや日々の雑記を綴ります。ちょっとだけ、あなたの役に立てる、そんなブログを目指しています。

【ブログカスタマイズ】はてなブログに動画を簡単に貼る!【無料】【簡単】【Dropbox】

参加してます!ポチッとお願いします

記事名と
URLをコピー

こんにちは、情報系大学生のハル(Blog_IT_haru)です。

今回は、Dropboxの動画をはてなブログに貼るやり方を解説します。

他のサービスでのやり方の記事も、

最後の方に記載がありますので、 ぜひ参考にしていただけると嬉しいです。

f:id:Blog_IT:20210401172355p:plain

 

 

Dropbox

埋め込む動画を選ぶ

f:id:Blog_IT:20210310164541p:plain

リンクをコピーをクリック

f:id:Blog_IT:20210310165658p:plain

このとき、心配な方は、隣の人マークから

「このリンクを知っている全ユーザー閲覧可能」

になっているかチェックしておきましょう。

f:id:Blog_IT:20210310165738p:plain

コピーしたリンクを少し加工する

リンクをそのままでは埋め込むことができないので、少し加工をします。

f:id:Blog_IT:20210310170116p:plain

【Youtubeを使わずに】Dropboxからサイトに動画を埋め込む方法 | ゆずゆろぐ。

難しそうですが、加工するのは二箇所のみで、

1.「www.dropbox.com」のところを「dl.dropboxusercontent.com」に変える
2.「?dl=0」をカットする

引用元:

【Youtubeを使わずに】Dropboxからサイトに動画を埋め込む方法 | ゆずゆろぐ。

です。

はてなブログの記事編集画面の「HTML編集」にコピペ

以下のコードをコピペすると、動画を貼り付けることができます。

<video controls width="550" height="auto">
<source src="修正した共有用URL" type="video/mp4">
</video>

引用元:

【Youtubeを使わずに】Dropboxからサイトに動画を埋め込む方法 | ゆずゆろぐ。

参考にしたサイトでは、ワードプレスでのやり方ですが、はてなブログでも同じようにできます。

 

 

参考にしたサイト

yuzuyu3.com

他のサービスでのやり方

Streamable

Streamableの方法はこちらの記事を御覧ください。

blog-it.hatenablog.com

YouTube

YouTubeでの方法はこちらの記事を御覧ください。

blog-it.hatenablog.com

MEGA

MEGAでの方法はこちらの記事を御覧ください。

blog-it.hatenablog.com

Google Drive

Google Driveでの方法はこちらの記事を御覧ください。

blog-it.hatenablog.com

まとめ

いかがでしたか?

ブログへの、動画の貼り付けは、このように、簡単に行うことができます。

Dropbox以外のやり方も、紹介していますので、ぜひ、自分にあったやり方を、試してみてくださいね。

今回は、はてなブログ無料版・Pro版共通でのやり方を紹介しました。

が、もっと本格的にブログをやりたい方は、はてなブログProへの登録をおすすめします。

この記事がいいな、と思ってくれたら、SNSなどで拡散したり、

ブックマークやコメントなどしてくれると励みになります!

更に、読者になってくれたら、お返しに私も読者になります!

また、この記事の内容についてなにかありましたら、

お問い合わせ、コメント、TwitterのDMなどによろしくお願いします。

それでは。