# Need help with video intergation

**URL:** <https://forum.bubble.io/t/need-help-with-video-intergation/325010>\
**Category:** Need help\
**Created:** [June 2, 2024, 5:19am UTC](https://forum.bubble.io/t/need-help-with-video-intergation/325010 "2024-06-02T05:19:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![wishgaming84](https://avatars.discourse-cdn.com/v4/letter/w/a5b964/32.png) [@wishgaming84](https://forum.bubble.io/u/wishgaming84)\
**Post date:** [June 2, 2024, 5:19am UTC](https://forum.bubble.io/t/need-help-with-video-intergation/325010/1 "2024-06-02T05:19:53Z")

</div>

Hey, how do I make a video play in the background of my webpage, its a video of a mountain with clouds and I want to put text ontop of it so it looks cool, but I can’t figure out how to have a video autoplay without either the youtube Ui there or to click to start the video.

---

<div class="post-metadata">

**Author:** ![wishgaming84](https://avatars.discourse-cdn.com/v4/letter/w/a5b964/32.png) [@wishgaming84](https://forum.bubble.io/u/wishgaming84)\
**Post date:** [June 2, 2024, 5:21am UTC](https://forum.bubble.io/t/need-help-with-video-intergation/325010/2 "2024-06-02T05:21:23Z")

</div>

> **[Synapse Softworks LLC](https://web.archive.org/web/20231027180602/https://synapsesoftworks.llc/)**
>
> Software development experts since 2018. We specialize in delivering software that just works.

It should look like that

---

<div class="post-metadata">

**Author:** ![arthuribeiro](https://avatars.discourse-cdn.com/v4/letter/a/59ef9b/32.png) [@arthuribeiro](https://forum.bubble.io/u/arthuribeiro)\
**Post date:** [June 2, 2024, 12:43pm UTC](https://forum.bubble.io/t/need-help-with-video-intergation/325010/3 "2024-06-02T12:43:29Z")

</div>

Hello!

In this case, I think using a GIF would be more appropriate (following standard optimization and user experience rules, although, on second thought, a GIF usually has terrible quality for some device formats). However, if you want to display a video like on the example site you provided, you can do so by adding HTML to the background of your page.

```html
<video autoplay="" width="100%" muted="" loop="" class="pointer-events-none z-0 h-full w-full object-cover object-top">
  <source src="https://videos.pexels.com/video-files/2888383/2888383-hd_1280_720_24fps.mp4" type="video/mp4">
</video>

```

This will add a looping and muted video without visible controls, creating an experience like this:

To do this, I created a group with “center align to parent” using these settings:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/4/0/40d34f21a9226b2860539404d3e46bcdb9e07c69.png)

Then, inside this group, I added the HTML provided above. I configured this HTML as follows:

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/b/1/b1b38dee8438fdb9b9a9c57a34b3c302e00b5b0a.png)  
 ![image](https://us1.discourse-cdn.com/bubble/original/3X/d/9/d93a7658af63422427be2fcd8c24bbffde748563.jpeg)

These settings should give you a responsive design:

Then, you can add another group inside this same group to add the title and anything else you want to include.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\
**Post date:** [August 11, 2024, 5:20am UTC](https://forum.bubble.io/t/need-help-with-video-intergation/325010/4 "2024-08-11T05:20:06Z")

</div>

Closed on August 11, 2024, 5:20am UTC

This topic was automatically closed after 70 days. New replies are no longer allowed.