I want to have a responsive website or app that has a Youtube video on it. But when I look at it on mobile, the Youtube video remains the same size and goes off the page. Surely there is a way to make the video or embedded html responsive???
1 Like
If the page is set to be responsive, the HTML element should get redrawn when the page size changes
I wanted to share an update since I ran into the same issue. I realized my HTML code had an iframe with defined width and height, so I added a condition that when the page’s width <400, HTML code (then I edited the code in the HTML editor to have a width of 375 and height of 215). Seems to work so far!
Is it possible to make an html video responsive? i know that the HTML element itself responds to page, but the video itself wouldnt follow, it stays the size set in the code.
I’m having the same issue and @david8 suggestion does not solve it for me. The embedded youtube clips look perfect on desktop but on mobile even with a condition that resizes it still has the video cut off and going over the screen. Would love some help on this. Seems like it should be an easy fix. @emmanuel
Note: I’ve not fully reviewed the thread etc. but have you tried embedresponsively.com? Just asking. No api, just code.
3 Likes
That worked. Cheers man.
The hidden ingredient in the code is the width and height parameters being set to 100%. This makes it auto adjust to the HTML box
1 Like
http://embedresponsively.com/ is super DOPE. Thanks @keith!
This worked perfectly! . Thanks. I simply copied the code from https://embedresponsively.com/ and dropped it into an HTML element.
The preview in the editor isn’t right… but the video works perfectly for resizing. Tested on mobile as well.
How it looks when editing:
You do have to make sure you uncheck iFrame and make fit height to content as shown below
2 Likes
Hi, @mayur , thanks for sharing your experience. Would you mind to help me? if you can I’m newbie and have similar question but for a few videos to embed into one page and make it responsive. I’m going to make up the one-page site for design agency with bubble template . I wanna add there some videos (instead of projects’ photos of the template) stored at Youtube channel. It should look like this web of commercial animation studio, i.e. embedded from youtube, playable on the web, responsive and clickable for passing to YouTube. Do I understand right, that I’ll have to insert one by one the video links to the embedresponsively, then copy code under “Embed code” and to insert it somewhere at the code of the template, instead of the code fragments of pictures’ flex containers? Do you think this solution for images’ template will work for videos as well? or, perhaps, any ideas how to do that?
Hi @alemak
I’m really unclear on how to respond to your post. Its easier to work in the editor with you. What I can do, if you are willing, is to setup a live call and we can work on it together.
How does that sound?
What I request in return: let me record it and place our conversation online. Why? I’m building my Bubble profile up as I’m actually soon going to be a Product Mentor with Bubble. Having our conversation on Youtube would help me build some content online.
If this sounds good to you, send me a DM and I can reply with my calendly booking link
Hi @mayur Thanks for your feed-back and proposal. Appreciate your approach! I don’t wanna take your time much. Let me see more templates and try to do it by myself. In case I need your further support, I’ll DM you. Thanks & good luck in your career. I’m sure you’ll be a really good Mentor ! 
Sure… no problem @alemak. Keep in touch.