cast dialog element
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Copyright 2014 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.


The cast-dialog element serves as a dialog to notify the user of two things.

  • The page is cast enabled
  • The upcoming video if it exists in queue

A demo of the cast dialog in use can be found here. Along with it's source here.


cast-dialog observes cast-manager's castAvailable property to determine if a receiver device is available. If one is it automatically displays the cast_enabled dialog.

To display the preload message, set countdownToNextMediaItem to not null and nextQueueMediaItem to a cast.Mediaitem.

The preload message hides when a mediaLoaded or hideDialog iron event is fired.


Use Bower to include the cast-dialog in your web app. The following command will add cast-dialog and it's dependencies to your project.

bower install --save googlecast/cast-dialog-polymer


You'll need to first include Polymer.

Including the element

In your html include the element.

<link rel="import"



You can quickly update the theme of your Cast Polymer elements by modifying the cast-theme element under bower_components in your project.


The position can be modified by defining four CSS variables:

  • --position-top - distance from top of the screen
  • --position-right - distance from the right side of the screen

If you're defining style in the main document, you can use the custom-style element


  cast-dialog {
    --position-top: 100px;
    --position-right: 5%;


Your use of this sample is subject to, and by using or downloading the sample files you agree to comply with, the Google APIs Terms of Service and the Google Cast SDK Additional Developer Terms of Service.