Streaming live at 10am (PST)

How to create code to embed a dropbox video


#1

Hi there,

I have been looking at numerous forum posts as to how to upload a drop box video and make it my page background, I have tried so many different ways and have now totally confused myself.

This is the read only link to my page - https://preview.webflow.com/preview/juliets-exceptional-site?preview=a63b580bed9eefab53ad845c20db800b

I am currently using Safari 9 browser

This is the video I would like to embed https://www.dropbox.com/s/mknhkfco18ysl7g/YAMIdent_webres_clean.mov?dl=0

I have been following this http://forum.webflow.com/t/complete-custom-code-for-full-browser-html5-video-background/13823 and have tried but obviously not writing the code correctly.

Please help! thank you.


#2

To get the direct link to a video do this:

In your Dropbox dashboard right-click on the video you want and click Get share link (Something like that)
You will get a link that will look like this:

(https://www.dropbox.com/s/m12nqaqkecnixln/YAMIdent_webres_clean.mov?dl=0)

Now replace www.dropbox.com with:
dl.dropboxusercontent.com

so you will get:
(https://dl.dropboxusercontent.com/s/mknhkfco18ysl7g/YAMIdent_webres_clean.mov?dl=0)

So this is your link: (https://dl.dropboxusercontent.com/s/mknhkfco18ysl7g/YAMIdent_webres_clean.mov?dl=0)


#3

I have now done this

<video autoplay loop style="min-width:100%; min-height:100%;" poster="/images/video.gif">
  <source src="http://dl.dropbox.com/s/g4yyjdx9j847z2m/YAMIdent_webres_clean.mp4.mp4" />
  <source src="http://dl.dropbox.com/s/41rry3c569j1i4l/YAMIdent_webres_clean.webmhd.webm" />
  <http://dl.dropbox.com/s/lptddodrvm1nwff/YAMIdent_webres_clean.oggtheora.ogv" />
  <img src="video.jpg">
</video>

and the video now appears within the website, but it is not responsive?


#4

What i usually do is this: Section > div that covers the section > the html embed that covers the div.


#5

Ok thanks but can a div become a whole background of the website?


#6

Hi @julietcarmen, this is a good question and can be done with some styling. Can you post a new question with some screenshots of the trouble you're having when designing your embed? (this post appears to be more code focused.)

Thanks in advance!


#7