Move the casting icon to media controls.

ui/file_manager/video_player/css/media_controls.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. */
 
 .media-button {
   height: 28px;
+  margin: 0 5px;
   position: relative;
   width: 26px;
 }
 
 .media-button > div {
+  background: center center;
   height: 100%;
   opacity: 0;
   pointer-events: none;
   position: absolute;
   transition: opacity 100ms linear;
   width: 100%;
 }
 
 .media-button[state='default']:not(.disabled):not(:hover):not(:active) >
     .default.normal,
@@ skipping 157 matching lines @@
 }
 
 .custom-slider > .bar > .seek-mark.visible > .seek-label {
   opacity: 1;
 }
 
 /* Media controls in order of appearance. */
 
 /* Play/pause button. */
 
-.media-button.play {
-  margin-left: -7px;
-  margin-right: -7px;
-}
-
 .media-button.play > .default.normal {
   background-image: -webkit-image-set(
     url('../images/media/media_play.png') 1x,
     url('../images/media/2x/media_play.png') 2x);
 }
 
 .media-button.play > .default.hover {
   background-image: -webkit-image-set(
     url('../images/media/media_play_hover.png') 1x,
     url('../images/media/2x/media_play_hover.png') 2x);
@@ skipping 93 matching lines @@
 .custom-slider.progress > .bar {
   left: 14px;  /* Exactly 1/2 of the thumb width */
   right: 14px;
 }
 
 /* Time display. */
 
 .time-controls > .time {
   cursor: default;
   height: 100%;
-  margin-left: 15px;
+  margin-left: 10px;
   position: relative;
 }
 
 .time-controls > .time.disabled {
   opacity: 0;
 }
 
 /* Invisible div used to compute the width required for the elapsed time. */
 .time-controls > .time > .duration {
   color: transparent;
@@ skipping 17 matching lines @@
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   display: -webkit-box;
   height: 100%;
 }
 
 /* Sound button */
 
 .media-button.sound {
-  margin-left: -4px;
   width: 31px;
 }
 
 .media-button.sound[level='0'] > .normal {
   background-image: -webkit-image-set(
     url('../images/media/media_sound_disabled.png') 1x,
     url('../images/media/2x/media_sound_disabled.png') 2x);
 }
 
 .media-button.sound[level='0'] > .hover {
@@ skipping 69 matching lines @@
 .media-button.sound > .disabled {
   background-image: -webkit-image-set(
     url('../images/media/media_sound_full_disabled.png') 1x,
     url('../images/media/2x/media_sound_full_disabled.png') 2x);
 }
 
 /* Volume slider. */
 
 .custom-slider.volume {
   height: 100%;
-  margin-left: -4px;
-  margin-right: -4px;
   position: relative;
   width: 60px;
 }
 
 .custom-slider.volume > input[type='range']::-webkit-slider-thumb {
   background-image: -webkit-image-set(
     url('../images/media/media_volume_slider_thumb.png') 1x,
     url('../images/media/2x/media_volume_slider_thumb.png') 2x);
   width: 20px;
 }
@@ skipping 24 matching lines @@
 .video-controls {
   -webkit-box-align: center;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   background: #202020;
   border-radius: 5px;
   display: -webkit-box;
   font-size: 15px;
   height: 30px;
   opacity: 0.8;
-  padding-left: 15px;
-  padding-right: 15px;
   pointer-events: auto;
 }
 
-.video-controls .time-controls,
-.video-controls .volume-controls {
-  margin-left: 15px;
+/* Cast button. */
+
+.media-button.cast > .default.normal {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast.png') 1x,
+    url('../images/media/2x/media_chromecast.png') 2x);
 }
 
+.media-button.cast > .default.hover {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_hover.png') 1x,
+    url('../images/media/2x/media_chromecast_hover.png') 2x);
+}
+
+.media-button.cast > .default.active {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_down.png') 1x,
+    url('../images/media/2x/media_chromecast_down.png') 2x);
+}
+
+#video-player[casting] .media-button.cast > .default.normal {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_casting.png') 1x,
+    url('../images/media/2x/media_chromecast_casting.png') 2x);
+}
+
+#video-player[casting] .media-button.cast > .default.hover {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_casting_hover.png') 1x,
+    url('../images/media/2x/media_chromecast_casting_hover.png') 2x);
+}
+
+#video-player[casting] .media-button.cast > .default.active {
+  background-image: -webkit-image-set(
+    url('../images/media/media_chromecast_casting_down.png') 1x,
+    url('../images/media/2x/media_chromecast_casting_down.png') 2x);
+}
+
+.media-button.cast {
+  display: none;
+}
+
+#video-player[cast-available][castable] .media-button.cast {
+  display: block;
+}
+
+
 /* Fullscreen button. */
 /* There is no final decision whether we need a separate icon when toggled. */
 
-.media-button.fullscreen {
-  margin-left: 9px;  /* 15px visible margin - 6px whitespace in the icon. */
-  margin-right: -6px;
-}
-
 .media-button.fullscreen > .normal {
   background-image: -webkit-image-set(
     url('../images/media/media_fullscreen.png') 1x,
     url('../images/media/2x/media_fullscreen.png') 2x);
 }
 
 .media-button.fullscreen > .hover {
   background-image: -webkit-image-set(
     url('../images/media/media_fullscreen_hover.png') 1x,
     url('../images/media/2x/media_fullscreen_hover.png') 2x);
@@ skipping 91 matching lines @@
     url('../images/media/media_play.png') 1x,
     url('../images/media/2x/media_play.png') 2x);
 }
 
 .playback-state-icon[state='pause'] {
   -webkit-animation: blowup 500ms;
   background-image: -webkit-image-set(
     url('../images/media/media_pause.png') 1x,
     url('../images/media/2x/media_pause.png') 2x);
 }