# Responsive background video

**URL:** <https://forum.bubble.io/t/responsive-background-video/210334>\
**Category:** Mobile\
**Created:** [June 8, 2022, 3:35pm UTC](https://forum.bubble.io/t/responsive-background-video/210334 "2022-06-08T15:35:28Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![k112](https://avatars.discourse-cdn.com/v4/letter/k/43a26b/32.png) [@k112](https://forum.bubble.io/u/k112)\
**Post date:** [June 8, 2022, 3:35pm UTC](https://forum.bubble.io/t/responsive-background-video/210334/1 "2022-06-08T15:35:28Z")

</div>

Hi

I’m having issues getting my background video to fit properly on a mobile device.

If you take a look at [https://kthxbai.bubbleapps.io/](https://kthxbai.bubbleapps.io/) on mobile you will notice that you are able to scroll up and down on the video.  
I’m simply trying to make it so take away the scroll and zoom out a bit as its a 1440p video.

Any help is greatly appreciated.

Thanks.

---

<div class="post-metadata">

**Author:** ![k112](https://avatars.discourse-cdn.com/v4/letter/k/43a26b/32.png) [@k112](https://forum.bubble.io/u/k112)\
**Post date:** [June 8, 2022, 3:44pm UTC](https://forum.bubble.io/t/responsive-background-video/210334/2 "2022-06-08T15:44:46Z")

</div>

I kind of have it working but I still need some advice.

When I load the page on mobile it loads zoomed in for some reason, If I zoom out it locks the screen to the size I want it but I’d like it to load like that.

Thanks.

---

<div class="post-metadata">

**Author:** ![cmarchan](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/cmarchan/32/253062_2.png) [@cmarchan](https://forum.bubble.io/u/cmarchan)\
**Post date:** [June 8, 2022, 3:53pm UTC](https://forum.bubble.io/t/responsive-background-video/210334/3 "2022-06-08T15:53:45Z")

</div>

Hello @k112

Try prevent the user from zooming

 ![image](https://us1.discourse-cdn.com/bubble/original/3X/6/1/619c47782e042a2f4753aeb6d675f6c93199f0bd.jpeg)

---

<div class="post-metadata">

**Author:** ![k112](https://avatars.discourse-cdn.com/v4/letter/k/43a26b/32.png) [@k112](https://forum.bubble.io/u/k112)\
**Post date:** [June 8, 2022, 4:03pm UTC](https://forum.bubble.io/t/responsive-background-video/210334/5 "2022-06-08T16:03:20Z")

</div>

Hi

Unfortunately this didnt work but thank you for your help.

---

<div class="post-metadata">

**Author:** ![josh24](https://avatars.discourse-cdn.com/v4/letter/j/ed8c4c/32.png) [@josh24](https://forum.bubble.io/u/josh24)\
**Post date:** [June 9, 2022, 4:32am UTC](https://forum.bubble.io/t/responsive-background-video/210334/6 "2022-06-09T04:32:01Z")

</div>

Had the same issue on a recent project. I would normally just use javascript and do this without a plugin but I was on a tight deadline.

The plugin hasn’t been updated for the new responsive engine and it’s a bit buggy in my experience. But I think I got there with it in the end…

I ended up adding the background video element twice and then hiding/showing based on the `current page width`. It was the only way to dynamically adjust the height.

* * *

**Josh @ [Support Dept](https://supportdept.io)**  
Helping no-code founders get unstuck fast 🚀save hours, & ship faster with an expert 👨‍💻 on-demand

I post daily about no-code and Bubble on Twitter [![Follow Support Dept on Twitter](https://us1.discourse-cdn.com/bubble/original/3X/1/8/1873f49286561817ba05167fa92d9e54f81b7f67.png)](https://twitter.com/JoshSupportDept)

---

<div class="post-metadata">

**Author:** ![k112](https://avatars.discourse-cdn.com/v4/letter/k/43a26b/32.png) [@k112](https://forum.bubble.io/u/k112)\
**Post date:** [June 9, 2022, 6:59am UTC](https://forum.bubble.io/t/responsive-background-video/210334/7 "2022-06-09T06:59:04Z")

</div>

Hey @josh24

This is great to know, I’ll give it a shot as soon as I get home.

Thanks for your help! 😃