Fix <video> positioning for the MediaSource-based rendering

<video> must always be placed under the plugin, but it wasn't always
positioned properly. Moved video-container inside horizontally-centered div
so now video-container always occupies the same area as the <video> and the
plugin.

BUG=321825

Review URL: https://codereview.chromium.org/269793002

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@268005 0039d316-1c4b-4281-b951-d872f2087c98

2 files changed, 11 insertions, 4 deletions

diff --git a/remoting/webapp/html/client_plugin.html b/remoting/webapp/html/client_plugin.html
index af375ae..7353b23 100644
--- a/remoting/webapp/html/client_plugin.html
+++ b/remoting/webapp/html/client_plugin.html
@@ -4,8 +4,12 @@ Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 <div class="vertically-centered">
-    <div id="video-container">
-      <video id="mediasource-video-output"></video>
-      <div id="client-plugin-container" class="horizontally-centered"></div>
+  <div class="full-width">
+    <div class="horizontally-centered">
+      <div id="video-container">
+        <video id="mediasource-video-output"></video>
+        <div id="client-plugin-container"></div>
+      </div>
     </div>
+  </div>
 </div>
diff --git a/remoting/webapp/main.css b/remoting/webapp/main.css
index 2e16fbb..ec616a8 100644
--- a/remoting/webapp/main.css
+++ b/remoting/webapp/main.css
@@ -707,6 +707,10 @@ html.apps-v2.scrollable {
   display: none !important;
 }
 
+.full-width {
+  width: 100%;
+}
+
 .full-height {
   height: 100%;
 }
@@ -745,7 +749,6 @@ html.apps-v2.scrollable {
 /* 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;
 }