Recent Topics

Youtube (and others..) video sizing

Started by on Jun 14, 2017 – Last touched: Jul 16, 2017

Jun 14, 2017 21:01    

So when using b2evo's video button to add a vid to a post, it sets the player at a weird, small size.. right? well how do we make it so its responsive and adapts to the page/viewerport size? (and keep the proper aspect ratio)

Jun 17, 2017 06:23

Hi @ppnsteve
At plugins\videoplug_plugin\_videoplug.plugin.php
find and change the code from

<div class="videoblock"><iframe id="ytplayer" type="text/html" width="425" height="350" src="//www.youtube.com/embed/\\1" allowfullscreen="allowfullscreen" frameborder="0"></iframe></div>

to

<div class="videoblock" style="text-align: center;"><iframe id="ytplayer" type="text/html" style="width:90%;" src="//www.youtube.com/embed/\\1" allowfullscreen="allowfullscreen" frameborder="0"></iframe></div><script type="text/javascript">document.getElementById("ytplayer").style.height=document.getElementById("ytplayer").scrollWidth*0.7+"px"</script>

Maybe this is what you need. Have a try.

Jun 17, 2017 10:12

Hi @ppnsteve and @haharen.

There is also a CSS trick that doesn't need to touch the plugin's code. Just add the following CSS to the field "Custom meta tag/css section (before </head>):" at the Settings > Advanced section of your collection (http://b2evolution.net/man/skin-and-style):

<style>
.videoblock {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoblock iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
</style>

Jun 17, 2017 13:11

@haharen thanks fop youir reply :)

@mgsolipa Thanks for the css fix.. that seems to be easiest and is working well.


Form is loading...

powered by b2evolution – This forum is powered by b2evolution CMS, a complete engine for your website.