I was hoping to use the native wordpress video player, but I'd like to 'expand' the video size on the page. Is that possible? I can't seem to make this work.
Actual MP4 video size = 640 x 360 but I'd like it to enlarge / stretch on the screen to 1.5 times size. In fact the video shrinks to 474 px width on the page!
I'm just testing this on a simple website, using the Twenty Fourteen theme, WordPress 4.0. In display mode, I'm seeing
<div class="wp-video" style="width: 474px; height: 267px; ">
<div id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" style="width: 474px; height: 266px;">
<div class="mejs-inner">
<div class="mejs-mediaelement">
<div id="me_flash_0_container" class="me-plugin">
<video id="video-785-1" class="wp-video-shortcode" width="474" height="266" preload="metadata" tabindex="0" style="display: none; width: 100%; height: 100%;">
<source src="http://mywebsite.com/wp-content/uploads/2014/09/Video.mp4?_=1" type="video/mp4"></source>
<a href="http://mywebsite.com/wp-content/uploads/2014/09/Video.mp4">http://mywebsite.com/wp-content/uploads/2014/09/Video.mp4</a>
</video>
</div>
<div class="mejs-layers">...
I have no clue where the 474 width is coming from... Note: the video does display as 640 x 360 on the WP admin media page. The native wordpress media tools don't seem to offer any options for display width. I've tried overwriting settings via CSS but nothing makes sense. Anybody been here before? How do I control the display size of my video? Many thanks, Zip
Update: I'm wading thru WordPress core, and I see a file media-template.php with the code:
settings = wp.media.view.settings;
if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
w = settings.contentWidth;
} else {
w = data.model.width;
}
and later I see where that gets pasted into the <div class="wp-video" .. line of output. I'm still don't understand exactly what is going on and why.
Update #2: I took the VanCoder info below, created a child theme, overwrote the $content_width variable = 474 setting in functions.php, and that fixed the div class = "wp_video" line of code.. it didn't, however fix the next line, so the video is still small. In fact when the page first loads, you can see the video sorta large, then after a fraction of a second it reduces size again. The next line <div id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" style="width: 474px; height: 266px;"> appears to be generated from within a minified javascript file (I believe mediaelement-and-player.min.js) but that is way ugly. Its so ugly as to be doggone difficult to troubleshoot in the browser. All the variables are minimized to single character. (insert your own four letter word adjectives here.) Anybody else been here?
Update #3: I left work and opened this site at home. The issue with the incorrect sizing on the div id="mep-0" error is totally gone. I now see the video in its native size (640 x 360). Not sure what happened, I presume some file was stuck in local cache on the machine at work. Work = Mac desktop, Home = Win8 laptop. So I'm half way fixed. I still don't know how to enlarge the video beyond native size.
I can enlarge the video locally and store it to media, and then get a larger display, but that seems a waste of bandwidth. At this point I'm thinking that's my only fix.
