What is the proper way to make a YT video with responsive width and height?
The width is easy enough, but then the height should be a percentage of the width. How can I define the width at 0.5625% of the height? It seems like there should be an aspect ratio control on the video element.
Did you ever figure this out? Seems odd that video height wouldn’t adjust proportionally to width.
No, I still haven’t figured out how to maintain video proportions with the responsive engine.
I have the same issue. Any solutions yet?
My (temporary?) solution was to create two nearly identical video player elements that show/hide based on the page width. I just set the height of the video so that it would look normal at each page size. Not ideal, but waiting on an answer to this responsive issue was holding back my site.
Same Q, this is maddening.
Same problem. Would love to see a solution.
Me too
So I haven’t really tested this solution much, but it appears to be working at first glance. I would LOVE if someone who knows more about HTML can analyze this and tell me about any potential problems. I’m basically copy/pasting the code from this site:
The only change was that I added < style> … < /style> tags before and after each CSS style thingy (is it obvious that I don’t know real coding?), so the final entry into the HTML element on Bubble is this:
<style>
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
</style>
<style>
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/YrDyMWIHDSY"></iframe>
</div>
My main issue is that I stored my YouTube videos as full links with the “watch” part of the URL, but this HTML solution requires the embed link. In order to apply it across my site, I’ll need to update my database to change all my links in some way. I would definitely love to get more feedback on this solution before I go through all that trouble. Please share your experience if you try it too!
Any solution yet? I am also struggling with the same.
Thanks for sharing this. I tested on a video. Seems to be working.
For a non-coder, you’ve done amazingly! thanks so much
<video autoplay loop mute>
<source src="YOUR URL" />
</video>
</div>
<style>
video {
width: 100% !important;
min-width: 10px !important;
}
<\style>
Place an html inside of your page and paste this code (just change the URL)
“autoplay, loop, mute” are attributes and you can change or delete if you want to show the video as a picture. You’ll find more here “https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attributes” (go to the attributes section)
You can also play with the CSS:
video {
width: 100% !important;
min-width: 10px !important;
}
You can find more options here “https://www.w3schools.com/css/css_rwd_videos.asp”
Spent a lot of time trying to figure this out and turned out it was because “Fit height to content” needs to be checked, while “Fit width to content” should be unchecked. Both height an width are responsive now using the example HTML + CSS that was shown here. See also here: https://howchoo.com/webdev/how-to-make-youtube-videos-responsive-without-js
Also for user provided YouTube links you can do a find and replace of the URL to turn the .com/watch?v=videoID and replace with .com/embed/videoID
Sorry I was referring to the HTML option of embedding the video - if you used the HTML element then you can see the Fit Height/Width to content selectors.
For video element I just use “Keep element ratio fixed” and entering the aspect ratio I wanted.
Ah, ok. Makes sense. So which element do you prefer?
Video element is way easier out of the box, but had unrelated issues with it so now using HTML.
I’ve got to say I’m no coder either, but for what it is worth here are my experiences…
In Bubble Version 20 I managed to make my Video Player contained within an iframe in an HTML element responsive by adding Dynamic Data into the iFrame width and height settings. It looked something like this:
<iframe class="responsive-iframe" src=https://bradmax.com/client/embed-player/628b95ca960d9b6939bd4c2818aac37a87f1e568_11849 width=Current Page Width height=Current Page Width/1.77 frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
The move to Bubble v21 seemed to break this. I reported it to Bubble via the helpdesk and they said that they had implemented a fix to v21 that should fix iFrames to be responsive?? And yet it was broken for me!
I fiddled around with it today and managed to get it working (with the help of this thread). The data in the Appearance section of the HTML element now reads:
<style>
.container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
</style>
<style>
.responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
</style>
<div class="container">
<iframe class="responsive-iframe" src=https://bradmax.com/client/embed-player/628b95ca960d9b6939bd4c2818aac37a87f1e568_11849 frameBorder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
One quirk was that I had to first delete the HTML element and re-add it. When I did this, the new HTML element had additional controls! Significantly, the “Fit height to content” checkbox was present on the Layout Tab (when it was not there before?!). I now have this selected.
I also have found that to get it working responsively I need to DESELECT the “Display as an iFrame” checkbox.
It now works responsively on v21 of Bubble.