How to Embed Dropbox Images or Videos on website?

Dropbox is one of the most popular online storage services, which millions of peoples daily use. It was founded in 2007 by Drew Houston. It is the first online storage company that came with the drop-and-upload concept. That’s why it is called Dropbox. We use it daily for different purposes, like for storing important files, sharing files to other peoples, and hosting our backup files. If you are a Blogger like me or a website developer, you must use Dropbox as your video host if you have a low traffic website. In this tutorial, I will be explaining to you guys, how to embed Dropbox images or videos on a website.

Do’s and Don’ts

  1. Always check for the video links, because sometimes the Dropbox share links stop working.
  2. Never host a big video file, because Dropbox has some serious bandwidth limitations if it somehow crosses the limit your account may be suspended in regard to abuse of their Terms of Service.
  3. Do not share any explicit content to keep your account safe, because its against Dropbox Terms of Service.

How to embed Dropbox Images or Videos on any website?

1. Login or Create your Dropbox Account

Go to the Dropbox.com website and sign in with your account. If you don’t have an account create one right now by going to dropbox.com and click on create account

DropBox Homepage - Embed Dropbox images and Videos

2. Upload Images or Videos to Dropbox to embed in website

Go to the Files section of your Dropbox account and upload the images or videos that you are going to embed on your website. In case, it’s already available on your Dropbox account then just skip this step.

Dropbox_Files

3. Share Dropbox Images or Videos with Public share link

Hover over the Dropbox images or videos file to embed in the website and then click on the “Share” and then click on Create Link. After creating a link created click on “Copy Link” and this will copy the public share link.

DropBox Share Button

DropBox Create Link

DropBox Copy Link - embed Dropbox images or videos

DropBox_File Public URL

4. Embed Dropbox Images and Videos on website

Now the final step, to embed, the Dropbox images or videos on any website you need to add the following code to your website. You need to open the website or HTML file editor.

(a) Images

You can embed images just by using the code below. Please remember to replace the “Your-Dropbox-Link” with your own Dropbox share link that you just copied in the above link, and add “?raw=1” at the end of the link.

Example: If this is the link of the image hosted on Dropbox :

https://www.dropbox.com/s/zesok1gfecvoop5/M.png?dl=0

then make it like this :

https://www.dropbox.com/s/zesok1gfecvoop5/M.png?raw=1
and then enter in the example code below :

You can change the width as per your requirement.

Copy the code and replace the Dropbox share link with your own link.

Read: How to create your own Digital Voice using Artificial Intelligence


(b) Videos

For embedding, Dropbox videos follow the steps below:

1. Copy the share link and change the ?dl=0 to ?raw=1

2. Put the changed link as per code shown in the snippet below.

Conclusion

Embedding Dropbox images or videos is a great idea if you want to embed some important images or videos on your website. But never depend on Dropbox for creating a streaming website and hosting a lot of videos on Dropbox, because Dropbox has some Bandwidth limitations. Also, doing so can get your account suspended. So, be careful.

If you still have any questions, then please let me know about it in the comments section, and I will try my best to reach you out and help in every possible scenario. Thank you.

This article was written by Abhishek Verma, the founder of Qdient Media Group and Innovative Beast, you can follow him on Twitter and also don’t forget to follow Innovative Beast so you won’t miss any of the videos and blog posts.

Thanks for reading this article, show us Love by sharing with your friends and followers on Social Media.

Default image
Abhishek Verma
Abhishek Verma is a Blogger and WordPress developer. He is working on WordPress from about 2015. He started ChampHub in 2018 to share his knowledge about WordPress and Blogging with the whole world. Before starting InnovativeBeast, he was writing for few other online portals like ChampHub, StayMeOnline etc
Leave a Reply