Vimeo/Youtube video as background

Design help Custom code
1

Hi everyone,

Been working on a page with loads of videos that should autoplay in a loop. Tried working with the WF Background Video Component, but it makes the page way to heavy.

Found the following piece of code in Codepen - this is exactly what I’m looking for, but I’m not sure how to integrate it into my page. Do I put all this code inside an embedded component?

Thanks!

1 Like
2

No thoughts on this one?

cc: @cyberdave @samliew

3

I’ll take Embed Element for 500. :slight_smile:

4

I usually use this code for background videos and place it inside a div with 100% height, absolute position and left=right=top=bottom=0:

1281×165 27.7 KB

1 Like
5

@Naama

Could you please provide the rest of the code that is cut off from the screenshot you took, please?

Or just copy/paste the code??

I’d like to implement your code into my site to see how well it works vs some other options I have.

1 Like
6 
<video autoplay loop style="min-height:100%;min-width:100%;position:absolute; z-index: -1;">
<source src="YOUR_MP4_ADDRESS" type="video/mp4"/>
<source src="YOUR_MOV_ADDRESS" type="video/mov"/>
<source src="YOUR_OGV_ADDRESS" type="video/ogg" />
<source src="YOUR_WEBM_ADDRESS" type="video/webm"/>
<img src="YOUR_IMAGE_ADDRESS" alt="home page top background"/>poster="YOUR_IMAGE_ADDRESS"
</video>
3 Likes
7

@anonmusic
Is this solution working out for you?

8

Miek this is 3 years old, look for newer posts on this subject or ask a specific question.

9

@iDATUS
I appreceate your feedback, but when searching for this exact issue this is the post that came up that best matches what I’m looking for. I have not discovered other posts that address this exact issue. My current work around is div abs position with -1 index with 100% width and height and set video div ?autoplay=1 and &loop=1 and applying content layer with 99 index on top of it.

Or please post link to newer post on this subject.

10

Still not getting your issue, this post is about how to do a background video and someone suggested doing embed code using htlm function.
This is a working example I posted couple days ago

<video loop autoplay width=“320” height=“240”>
<source src="https://www.dropbox.com/s/3bvckbups0zwkz7/sdl-2.mp4?dl=1" type="video/mp4">
</video>

will give this result