Streaming live at 10am (PST)

How to add background youtube videos with loop and no visible youtube overlay?

hi there recently just switched from squarespace. I’m trying to bring my site over from there and I cant seem to get my youtube videos to loop while taking up the full section.
this is the custom code I’m using for HTML Embed:
<iframe style="position: absolute; top: 0; left: 0;" src="https://www.youtube.com/embed/3RJZLiGzpOM?autoplay=1&controls=0&loop=1&playlist=3RJZLiGzpOM&amp;showinfo=0" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

Hey there!
Have you considered using a build-in video-background element? You might not need to fiddle with embeds, could ease your troubles of making the iframe responsive!

I would but the it only allows for up to 30MB and the transcoding ruins the crisp video quality so I’m having to do it the hard way but can’t exactly figure out how to do so :confused:

30MB is waaaay too big! Think of mobile users and limited band-widths!
There are many video compression tools available for free that considerably reduce file size without loss of quality.
Using a custom iframe yields lots of possible problems, you really should use WF tools, they do a lot of fool-proving and optimizing.

Being considerate with the users resources should be a higher priority than super crisp videos :slight_smile:

What format, bitrate and encoding are you using?

I’m using mp4, native h264 encoding and the bitrate is 12024 kbps
source is 1080p 60fps @ 39.7mb total size

I see!

My advice is still:

Try lowing the file size drastically by playing around with different compressions and evaluating the results. BG videos usually are not the main focus and are used supplementary.

Here’s an online tool for reducing size

Here’s some more info:


1 Like

okay thank you! I’ll definitely use these and look into reducing the size of the video. Thank you again.

1 Like