[important note: this only affects self-hosted <video>
tags, not youtube or vimeo iframes]
So I'm embedding in the page cellphone videos with a vertical ratio (portrait) (typically 720px width and 1280px height).
Everything works, except the videos will not adapt to the page. The width will fit, but the user needs to scroll up and down while the video plays to appreciate what is being shown.
I've tried all the CSS tricks to make the video div responsive, but it won't work.
The videos are wrapped into a div which reads as so:
.wp-video-shortcode, video, .mejs-mediaelement {
max-width: 100% !important;
max-height:100% !important;
}
But to no effect (only the width appears to adapt as the page changes size!).
IF I manually alter the width and hight in the shortcode, as so:
[video width="720" height="1280" mp4="http://url.mp4" autoplay="true" poster="http://url.jpg"][/video]
becoming
[video width="340" height="680" mp4="http://url.mp4" autoplay="true" poster="http://url.jpg"][/video]
The video gets smaller, but still will not adapt to the page.
I think I've figured why...? Tell me if I am off track:
The whole premise of how the <video>
embed in Wordpress is sized, seems to be based on width
: there is even a global variable called $content_width
for this purpose, while there is no $content_height
.
Specifically, this is what happens in the wp_video_shortcode
function:
global $content_width;
// if the video is bigger than the theme
if ( ! empty( $content_width ) && $atts['width'] > $content_width ) {
$atts['height'] = round( ( $atts['height'] * $content_width ) / $atts['width'] );
$atts['width'] = $content_width;
}
as you can see above, wp only seems to be checking the video only against the width of the page.
How can this be worked out?