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

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>

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;
 }