How to play HTML5 videos using Ruby Sinatra? - html5-video

Question

I am in the process of building my own portfolio site. I am using Ruby Sinatra. I want my home page to have a full screen video background. I have googled and I found nothing in regards to my situation. I have spent hours trying to make my video play and I have ran out of hope. I am open to any possible solutions that would help make it a success. Thanks!
HTML
<video width='512' height='288' id="splashvid" autoplay loop muted>
<source src="https://www.dropbox.com/s/2vyfy2ma6xslbyk/sweeping_view.mp4" type="video/mp4">
<source src="https://www.dropbox.com/s/svw8jyfx6a2k83n/sweeping_view.ogv" type="video/ogg">
<source src="https://www.dropbox.com/s/r99qulve4g0y4kk/sweeping_view.webm" type="video/webm">
</video>
CSS
video#splashvid {
background:url('https://www.dropbox.com/s/2vyfy2ma6xslbyk/sweeping_view.mp4') no-repeat;
-webkit-background-size:cover;
overflow: hidden;
}

Answer 1

First of all I'm not sure if that's a good idea, but you can do it.
Same domain
So your first problem is that you trying to load your videos from dropbox.
Accordingly to my observations in Firefox and Chrome it works only if the video source comes from the same domain. (source)
To achieve this I would create a folder called video in your public folder and link them like this: <source src="/video/sweeping_view.mp4" type="video/mp4">
Fix the autoloop
Now the video should play in most modern browser.
That loop works reliable in Firefox an Chrome I added preload="none" (source)
Fullscreen
To get the video as full screen here are a few ideas. I used
video {
width: 100% !important;
height: auto !important;
}
Which works but produces not the best results. Maybe look for a js solution.
Put html on top
And now you can place your other html elements on top of it with absolut positioning like this:
h1 {
position: absolute;
top:50px;
left: 30px;
}
Result