Twitter Bootstrap Question posted in

Maximize HTML5 video in window without any overflow – Twitter bootstrap

I’m working on an open source alternative to Plex and I’m trying to get the in-browser video player to take up as much of the window as possible during playback, but I’m running into some problems. The video player built in to Chrome does exactly what I am trying to do if you simply visit the URL for a video in it and so does the Netflix website. However, I’ve been unable to get this to play nicely on my site.

I’ve got the following code right now (JSF with PrimeFaces):

			div.video-container {
				margin: 0;
				padding: 0;
				width: 100%;
				height: 100%;
				text-align: center;
			}
			.expanded-video {
				padding: 0;
				margin: 0 auto;
				max-width: 100%;
				max-height: 100%;
			}
		<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;">
			<p:panel header="#{rawPage.getTitle()}" styleClass="ui-noborder video-container">
				<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="#{rawPage.getUrl()}" type="#{rawPage.getMimeType()}"
					width="auto" height="auto" preload='metadata' controls='' autoplay='' autofocus='' class="expanded-video" >
				</video>

				<script src="http://vjs.zencdn.net/6.2.0/video.js"></script>
			</p:panel>
		</div>

The problem is that I can either get it to fill the window horizontally or vertically, but if I resize the window, then the video extends beyond the edge of the screen. For example:

the bottom is cut off:
Bottom is cut off

same video, window resized (this behavior is right):
good behavior

What chrome does if I visit the url for an mp4 file (fits perfectly, nothing cut off):

width too much
height too much

I know that I can receive window resize events with javascript and set the height and width like that, but I’m looking for a pure HTML+CSS solution to this problem that lets me keep the div at the top showing the title of the movie. (Project already has Twitter Bootstrap)

Edit

The dom looks like this once it’s rendered by JSF:

<div style="position: fixed; left: 0; right: 0; top: 0; bottom: 0; text-align: center; max-width: 100%; max-height: 100%;"><div id="j_idt6" class="ui-panel ui-widget ui-widget-content ui-corner-all ui-noborder video-container" data-widget="widget_j_idt6"><div id="j_idt6_header" class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all"><span class="ui-panel-title">Big Buck Bunny</span></div><div id="j_idt6_content" class="ui-panel-content ui-widget-content">
				<video onclick="playPause(this)" ondblclick="toggleFullscreen(this)" id="movie" src="/media/api/raw/downloads/Big Buck Bunny.mkv" type="video/x-matroska" width="auto" height="auto" preload="metadata" controls="" autoplay="" autofocus="" class="expanded-video">
				</video>

				</div></div>
</div>

It’s also worth noting that we aren’t trying to support Internet Explorer or Edge and that, while we’d like to support Safari, we’re okay if we can’t.

Tags:

2

Answers


  1. 0

    Changing the max-width and max-height to ‘width’ and ‘height’ sorted it for me.

    You basically told the video that it can be any size as long as it’s not over 100%;

    .expanded-video {
    padding: 0;
    margin: 0 auto;
    width: 100%;
    height: 100%;
 }

    Hmmm, might have understood incorrectly and am unable to test my solution as videos are blocked at work

    Login or Signup to reply.
  2. 0

    You can also use this css trick to adjust ratio of video according to width;

    .cover { 
   min-width: 100%; max-width: 100%; object-fit: cover;
}

    Detailed Info Here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search