Fix <video> positioning for the MediaSource-based rendering

remoting/webapp/main.css

 /* Copyright (c) 2012 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
 blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
 dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td, button {
@@ skipping 704 matching lines @@
   display: flex;
   align-items: center;
 }
 
 .vertically-centered {
   display: flex;
   flex-direction: column;
   height: 100%
 }
 
+.vertically-centered-inner {
+  width: 100%;
+}
+
 .horizontally-centered::before,
 .horizontally-centered::after,
 .vertically-centered::before,
 .vertically-centered::after {
   content: "";
   flex: 1;
 }
 
 /* Bump-scrolling is currently implemented by adjusting the margins, which is
  * easier to implement with "position: fixed". In full-screen mode there are
  * no scroll-bars, so the advantages of flex-box layout to achieve centering
  * (ie, the DOM is easier to measure to determine when scroll-bars are needed)
  * don't apply */
 .full-screen #session-mode {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
 }
 
 /* video-container needs relative position so that mediasource-video-output can
  * be positioned relative to the parent with position:absolute. */
 #video-container {
-  width: 100%;
   position: relative;
 }
 
 /* mediasource-video-output is hidden by default. */
 #mediasource-video-output {
   display: none;
 }
 
 /* Use absolute positioning for mediasource-video-output so that it's rendered
  * at the same position as the plugin. */
 #video-container.mediasource-rendering #mediasource-video-output {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   box-shadow: 0 0 8px 0 black;
 }
 
 /*
  * With MediaSource-based rendering the plugin is transparent and is placed on
  * top of the <video> element so that it can still receive mouse events.
  *
  * TODO(sergeyu): This is temporary solution. Ideally mouse and keyboard events
  * should be captured on JS level and passed to the plugin.
  */
 #video-container.mediasource-rendering #client-plugin-container {
   opacity: 0;
 }