you can do it with some css 😉
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
div class=”video-container”
iframe src=”http://www.youtube.com/embed/dFVxGRekRSg” frameborder=”0″ width=”560″ height=”315″ /iframe
/div
@flyveren Is it possible to make this work without using a div container? The problem is when users post video embeds in my forum they won’t know to add that extra code.
i think that’s actually more of a theme thing if the container is responsive then the oembeds should also respond. are you maybe not using oembeds?
https://codex.wordpress.org/Embeds
@ubernaut Yes I am using oEmbed. In the default Buddypress theme oEmbeds don’t seem to be responsive so I’m trying to find the best way of doing that. Am having a look at FitVids at the moment as suggested here:
https://buddypress.org/support/topic/fitvids-js-and-bp-ajax/
oh hum the default theme maybe you should a open trac ticket on that one? i believe its still being supported even though theme compatibility is the preferred method. anyone know off hand if the BP default theme still comes packaged? haven’t really done a fresh buddypress install since 1.7.
You dont need to wrap these with a div. To make YouTube responsive just use the same styling you would to make images responsive.
Here’s what I used on the default theme for buddypress
iframe, video, img {
max-width: 100%;
min-height: auto;
}
The “min-height:auto” which is usually just “height:auto” for images I used because the videos were being pushed really flat. This fixed that problem and the videos don’t look the best on small phones but at least now they are viewable.
