Video background

Helpdesk Website Builder
1

Hi, I would like to use a YouTube video playing automatically as a BG and looping without sound in a container.
And I would like to add a heading over that video in the middle of the container
I tried to add it as a container BG but it shows the play and control buttons.
Is there a way to do that?

1 Like
2

Hi! I don’t know it it still works with YouTube, but there is a trick with Vimeo that you can use.

You can play any Vimeo in BG in this way:

<iframe src="https://player.vimeo.com/video/521261628?&amp;background=1" 
style="background-color: transparent" width="100%" height="100%" frameborder="0" allow="autoplay; webkitallowfullscreen mozallowfullscreen fullscreen" allowfullscreen="" 
data-ready="true">
</iframe>

Replace the video ID with yours.

Here is how to add it to SiteJet.

Screenshot 2021-06-14 at 18.37.23
Screenshot 2021-06-14 at 18.37.232958×1102 375 KB

I hope this helps.

2 Likes
3

Hi! … I forgot to make the entire video responsive + full width.


<style>
.video-container {
    overflow: hidden;
    position: relative;
    width: 130%;
    margin-left: -15%;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>
<div class="video-container">
   <iframe src="https://player.vimeo.com/video/521261628?&amp;background=1" style="background-color: transparent" width="100%" height="100%" frameborder="0" allow="autoplay; webkitallowfullscreen mozallowfullscreen fullscreen" allowfullscreen="" data-ready="true"></iframe>    
</div>
4 Likes
4

Great ! I will test this with YouTube.
Nothing shows except the video? No branding nor control buttons?

5

Hi! Nothing is displayed on the video, but it works only with Vimeo.
Example: Main Vid from Flow on Vimeo

2 Likes
6

Thanks. I guess I’ll have to change that. Are toi sure? You did try this with YT?

Jean-Pierre Michael
Site: hi.jpmichael.fr/jpm
Email: contact@jpmichael.fr
<="" p="">

7

Hi! YouTube player is a bit different. What I found is that it will show YouTube branding for a few seconds every time the video starts (there is no way to disable this, or at least I couldn’t find one)

Here is the code for YouTube:


<style>
.video-container {
    overflow: hidden;
    position: relative;
    width: 100%;
    margin-left: 0;
}

.video-container::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
</style>
<div class="video-container">
   <iframe src="https://www.youtube.com/embed/XHOmBV4js_E?playlist=XHOmBV4js_E&controls=0&rel=0&showinfo=0&playsinline=1&modestbranding=0&autoplay=1&enablejsapi=1&widgetid=1&mute=1&loop=1&html5=1" style="background-color: transparent" width="100%" height="100%" frameborder="0" allow="autoplay; webkitallowfullscreen mozallowfullscreen fullscreen" allowfullscreen="" data-ready="true"></iframe>    
</div>

You need to replace the Video ID( + Playlist ID) with your Video ID.

4 Likes
8

Wonderfull, thanks a lot !

1 Like