Background video autoplaying

Elements Audio & Video
1

Hi there,

It has been awhile since I have posted - a first for the new spangly forums. Looks nice!

My question is related to using video as a background element only, on auto loop. But in a way it is not consuming tons of resources etc…

I love the way the company ‘Sum Up’ used it on their webpage, and I’m looking to do a similar thing. I’ve played with Gifs but it’s not producing the same results. Here is a link: https://sumup.co.uk/?gclid=Cj0KEQjw_9OoBRChj9vMo5CHrdUBEiQAJ6YRPbrYbydmh-folphAeRdPa3Ep4a-3fmcZVZHq8yRxD5kaAu8_8P8HAQ

Any help mucho appreciated as always!

EDIT: We have a pro Vimeo account, so if there’s a way to embed, that would be doubly great!

Best,
Ash

2

There’s a huge set of plugins which have been developed to accomplish this. Here’s one: http://dfcb.github.io/BigVideo.js/

To do this using purely Hype controls, you would set the video to be the farthest bottom layer, remove controls, and set it to Autoplay. This won’t work for mobile devices though (video can’t autoplay), so you’ll need to create a different layout for those users.

I’m pretty sure Vimeo doesn’t give you access to display videos behind other content using their player, and they don’t make it easy to get the direct file URL of videos.

3

Hey Daniel,

Good to see Tumult is going from strength-to-strength! Great job on Hype Pro btw.

Back to the OP.

I already created a ‘mock up’ within hype using a pretty small file size, I guess the issue is the way the assets have to load, especially with video files, and this can in some instances cause a delay.

We use a Pro Vimeo account so have easy access to direct URL’s as if they were stored on the server. does this help in achieving a speedy page load up? With the direct URL link in mind, is there some way I can use the video as a background element while building within Hype. Perhaps using the html widget?

Non functioning video on mobiles is not a concern. :smile:

4

You would just create a normal video element based on these instructions:

<video autoplay loop poster="${resourcesFolderName}/polina.jpg" id="bgvid">
<source src="http:/site.com/polina.webm" type="video/webm">
<source src="http:/site.com/polina.mp4" type="video/mp4">
</video>

'polina.jpg' could be an image that blends well with your background, so that if the video can't load for some reason it displays. (The example above requires that it is in your resources library.

Next, make sure that element is underneath everything by adjusting its position in the layer order in Hype.

This is more a factor of the internet speed of the person loading the site and the quality of the video being loaded from the Vimeo account. Ideally, this would be as small as possible (and likely not HD) which is why you might want to create a custom size and load it from somewhere else instead of Vimeo. If you can use a service like Cloudflare ( http://www.cloudflare.com ) you can get better throughput.

5

I use Wistia for my video streaming. They have various types of imbeds but I’m not sure how to do this in Hype.

The above code you provided - this is attached to the element as HTML as is?

Typical Wistia iFrame code:

`

`