Youtube Video Stop Playing When The Page Resize

Need help Responsiveness
1

I use both Built-in Video Element and Video.js plugin.
when I resize the window or when I rotate the phone to a landscape mode the video will stop playing.

Thanks

2

The Example, Try to maximize, resize the window, or rotate your phone while video is playing. https://bubble.io/site/youtubeplayer/version-test/

1 Like
3

try iframe to load the video on html element. hope it works.

1 Like
4

It still doesn’t work! from my observation is the element will refresh them self everytime the window is resized.

5

Pages that are set to be responsive re-draw elements when the page is resided. For video, this means it’s redrawn and the video will restart.

One solution is to make the page fixed width so that it isn’t redrawn when the user changes the size. Additionally, you can use JS, etc. to move elements and make them responsive. Not too hard with a really simple page, but gets to be quite complicated for more intricate pages.

2 Likes
6

Try sending a bug report. I had this issue with inputs resetting on page resize and they were able to fix that issue. Maybe there is something similar they can do to help you. Hope it can get fixed for you.

1 Like
7

Hi @newlee,

Use below video element,


And working fine, while page resizing.
Reference:

1 Like
8

@manikandan Thanks man, If the web page is set to fixed-width like the link you gave me,
the video element will work fine.
But if it set to anything else, that make the web page responsive, it will not work.

9

@J805 Thanks man, I’ll do, right now I think it’s not a bug, it’s a Bubble’s limitation.

10

Please checkout below blog, hope it help.
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

1 Like
11

@sridharan.s Thank you for the clarification. I hope to have a plugin for this problem. I wonder how others deal with this problem. Embedding a Youtube video on the responsive website should be a simple matter these day.

12

@manikandan @sridharan.s This looks like a solution, but I have no idea where and how to put these code in my website :joy:

13

Just add an html element and paste the javascript code inside (javascript code)
Css style into [Css Code].

1 Like
14

Using a plugin or other code won’t solve the problem if the page is responsive. The solution is to make it fixed width so Bubble won’t re-draw the elements.

Even though the page would be fixed width (from Bubble’s POV) doesn’t mean you can’t use JS to adjust the video and/or other elements to make it look like it’s responsive to the end user. You just can’t use Bubble’s responsive settings if you don’t want the video redrawn/restarted.

Hope this clarifies things.

1 Like