# Video background

**URL:** <https://community.sitejet.io/t/video-background/336>\
**Category:** Website Builder\
**Tags:** cms\_content\
**Created:** [June 14, 2021, 2:40pm UTC](https://community.sitejet.io/t/video-background/336 "2021-06-14T14:40:27Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jean\_Pierre\_Michael](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/jean_pierre_michael/32/101_2.png) [@Jean\_Pierre\_Michael](https://community.sitejet.io/u/Jean_Pierre_Michael)\
**Post date:** [June 14, 2021, 2:40pm UTC](https://community.sitejet.io/t/video-background/336/1 "2021-06-14T14:40:27Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [June 14, 2021, 3:40pm UTC](https://community.sitejet.io/t/video-background/336/2 "2021-06-14T15:40:33Z")

</div>

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:

```auto
<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](https://europe1.discourse-cdn.com/flex017/uploads/sitejet/original/1X/287adf1719a40fac5a63d0882efe87cf4cdc4345.png)

I hope this helps.

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [June 14, 2021, 4:00pm UTC](https://community.sitejet.io/t/video-background/336/3 "2021-06-14T16:00:37Z")

</div>

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

```auto

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

```

---

<div class="post-metadata">

**Author:** ![Jean\_Pierre\_Michael](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/jean_pierre_michael/32/101_2.png) [@Jean\_Pierre\_Michael](https://community.sitejet.io/u/Jean_Pierre_Michael)\
**Post date:** [June 14, 2021, 5:01pm UTC](https://community.sitejet.io/t/video-background/336/4 "2021-06-14T17:01:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [June 14, 2021, 5:06pm UTC](https://community.sitejet.io/t/video-background/336/5 "2021-06-14T17:06:37Z")

</div>

Hi! Nothing is displayed on the video, but it works only with Vimeo.  
Example: [Main Vid from Flow on Vimeo](https://player.vimeo.com/video/521261628?background=1)

---

<div class="post-metadata">

**Author:** ![Jean\_Pierre\_Michael](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/jean_pierre_michael/32/101_2.png) [@Jean\_Pierre\_Michael](https://community.sitejet.io/u/Jean_Pierre_Michael)\
**Post date:** [June 15, 2021, 3:38am UTC](https://community.sitejet.io/t/video-background/336/6 "2021-06-15T03:38:52Z")

</div>

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](http://hi.jpmichael.fr/jpm)  
Email: [contact@jpmichael.fr](mailto:contact@jpmichael.fr)  
\<="" p=""\>

---

<div class="post-metadata">

**Author:** ![Lucian\_Dinu](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/lucian_dinu/32/141_2.png) [@Lucian\_Dinu](https://community.sitejet.io/u/Lucian_Dinu)\
**Post date:** [June 15, 2021, 4:49am UTC](https://community.sitejet.io/t/video-background/336/7 "2021-06-15T04:49:05Z")

</div>

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:

```auto

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

---

<div class="post-metadata">

**Author:** ![Jean\_Pierre\_Michael](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/jean_pierre_michael/32/101_2.png) [@Jean\_Pierre\_Michael](https://community.sitejet.io/u/Jean_Pierre_Michael)\
**Post date:** [June 15, 2021, 5:25am UTC](https://community.sitejet.io/t/video-background/336/8 "2021-06-15T05:25:02Z")

</div>

Wonderfull, thanks a lot !

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [October 20, 2021, 3:39pm UTC](https://community.sitejet.io/t/video-background/336/9 "2021-10-20T15:39:04Z")

</div>