Alex Mansfield

Beaver Builder: Mobile Video Autoplay

Mobile browsers often have hoops to jump though in order to get videos to autoplay. One of those hoops is including playsinline to the HTML video tag. This code adds playsinline for the Beaver Builder video module if the video is set to autoplay.

function playsinline_video( $output, $atts, $video, $post_id ) {
	if ( false !== strpos( $output, 'autoplay="1"' ) && FLBuilderModel::get_post_id() == $post_id ) {
		$output = str_replace( '<video', '<video playsinline', $output );
	}
	return $output;
}
add_filter( 'wp_video_shortcode', 'playsinline_video', 10, 5 );

Beaver Builder: CSS max-height for Full Height Rows

Beaver Builder allows rows to be set to the full height of the browser window. However, in some circumstances (maybe even most circumstances) it may be desirable for there to be a maximum height, after which the row will not continue to grow even though the browser window does.

To achieve full height rows, Beaver Builder sets the min-height of the row content div to 100vh. In CSS, min-height overrides max-height, so we can’t simply use max-height to stop the row from growing.

Beaver Builder uses min-height to allow the content to grow beyond the screen height if it needs more space. The following code works, but it uses height and max-height in addition to min-height. This means that it doesn’t allow the row to be taller than the browser window even when the content requires it. For this reason, we put it in a media query so it only applies if the screen is taller than a certain height.

Notice also that we changed the min height from 100vh to 100% to cause it to be 100% of the parent element instead of 100% of browser height. This allows us to use max-height on the parent element.

@media (min-height: 1080px) {
	.fl-row-full-height {
		height: 100vh;
		max-height: 1080px;
	}
	
	.fl-row-full-height > .fl-row-content-wrap {
		min-height: 100% !important;
	}
}

Ultimate Addons for Beaver Builder: Hide Title Tooltips on Hotspot Module

The hotspot module has custom tooltips, but for some reason still uses the title attribute, which causes the built in browser tooltip to be displayed as well. This line of JS fixes that problem (though it uses jQuery).

$('.uabb-hotspot-tooltip [title]').removeAttr('title');