Streaming live at 10am (PST)

Vimeo/Youtube video as background


#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!


#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:


#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.


#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>