WordPress: Responsive video (mp4 video inserted from media library)

Changed the wordpress wp-includes/media.php file. Probably not the best way to do this.
Ref: https://codex.wordpress.org/Video_Shortcode

At around line 2504, comment out the following:

$html_atts = array(
	'class'    => $atts['class'],
	'id'       => sprintf( 'video-%d-%d', $post_id, $instance ),
	'width'    => $atts['width'],
	//'width'    => absint( $atts['width'] ),
	//'height'   => absint( $atts['height'] ),
	'poster'   => esc_url( $atts['poster'] ),
	'loop'     => wp_validate_boolean( $atts['loop'] ),
	'autoplay' => wp_validate_boolean( $atts['autoplay'] ),
	'preload'  => $atts['preload'],
);

At around line 2565, comment out the following and add code:

if ( ! empty( $atts['width'] ) ) {
//	$width_rule = sprintf( 'width: %dpx; ', $atts['width'] );
	$width_rule = '';
}

Added additional CSS styles to make it work.

video {
  width: 100%    !important;
  height: auto   !important;
}

Source: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
https://coolestguidesontheplanet.com/videodrome/youtube/

While we’re at it, also centralize the video with this CSS

.wp-video { display:block; margin: 0 auto; }
This entry was posted in CMS and tagged , . Bookmark the permalink.

Comments are closed.