Display videos in the correct aspect ratio using Toolset

You can use the following shortcodes to display YouTube and Vimeo videos using Toolset Views + Custom Fields:

				
					[toolset_vimeo field="wpcf-vimeo-url"]
[toolset_youtube field="wpcf-youtube-url"]

* Replace vimeo-url and youtube-url with the slug of your Custom Fields. Keep the wpcf- prefix for Custom Fields that were added using Toolset.

The shortcodes are not available by default on Toolset, you need to add the following code to your functions.php:

				
					/**
 * Toolset Videos
 */

/** Vimeo */
add_shortcode( 'toolset_vimeo', function( $atts, $content, $shortcode_tag ) {
	$code = get_post_meta( get_the_ID(), $atts['field'], true );
	$code = str_replace( 'https://vimeo.com/', '', $code );
	$code = str_replace( '?share=copy', '', $code );
	return '<div class="video-wrapper"><iframe allowfullscreen="" title="vimeo Video Player" src="https://player.vimeo.com/video/' . $code . '?color&amp;autopause=0&amp;loop=0&amp;muted=0&amp;title=1&amp;portrait=1&amp;byline=1#t="></iframe></div>';
} );

/** Youtube */
add_shortcode( 'toolset_youtube', function( $atts, $content, $shortcode_tag ) {
	$code = get_post_meta( get_the_ID(), $atts['field'], true );
	return  '<div class="video-wrapper">' . $GLOBALS['wp_embed']->run_shortcode( '' ) . '</div>';
} );

Also, add the following code to your stylesheet:

				
					/**
 * Videos
 */
.video-wrapper{
	position: relative;
	background: #000;
	aspect-ratio: 16/9;
}
.video-wrapper iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

* You can replace 16/9 for the aspect ratio of your preference.