How to play HTML5 videos using Ruby Sinatra?

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;
}

This isn't really a Sinatra question, more like HTML. Are you seeing the HTML when you view source and is the stylesheet linked to it? — mahemoff, Jul 31 '15 at 08:36
Also the video background isn't valid CSS (though it would be cool if it was) — mahemoff, Jul 31 '15 at 08:36
by the way: you need to set public_folder and views only if they have a different location than public & views — Sir l33tname, Jul 31 '15 at 12:59
What do you mean setup public_folder and views? I have already them already. — Michael Stokes, Jul 31 '15 at 15:03
Just got it to work! I had my video tag type set to video/ogg instead of video/ogv. Thanks for everything! — Michael Stokes, Jul 31 '15 at 15:27

score 1 · Accepted Answer · edited May 23 '17 at 11:43

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

edited May 23 '17 at 11:43

Community

1
1

answered Jul 31 '15 at 12:57

Sir l33tname

4,026
6
38
49

I've tried adding a video folder and had the correct path, but the video player kept disappearing as soon as I loaded the page. – Michael Stokes Jul 31 '15 at 14:58
Is your source somewhere online? And which browser do you use? – Sir l33tname Jul 31 '15 at 15:00
They in my dropbox account and I use Google Chrome. – Michael Stokes Jul 31 '15 at 15:07
Can you share a link for it? – Sir l33tname Jul 31 '15 at 15:23
1

Just got it working! I had my video tag type set to video/ogg not video/ogv. Thanks for all the help! – Michael Stokes Jul 31 '15 at 15:24

How to play HTML5 videos using Ruby Sinatra?

1 Answers1