Polymer 1.0 - display youtube video like the Google I/O site header

[Darin Hensley]

I am using `Polymer Elements 1.0` and I want to implement a youtube video like they did at https://events.google.com/io2015/ in the header.

I see that they used:

    <div class="play__button__container" on-tap="{{openMastheadVideo }}" data-link-track="home-watch-keynote-masthead"><h5>Watch the keynote</h5> </div>

But nothing in Polymer Catalog that helps me understand this. 

I tried using `google-youtube` but I can't use the material designed play button...instead the default youtube playbutton is used. Also, I want to do the video full screen horizontally and about 400px vertically. But when I use

      <google-youtube

        video-id="YMWd8E"

        height="400px"

        width="100%"

        rel="0"

        start="5"

        playsinline="0"

        controls="0"

        showinfo="0"

        autoplay="0">

      </google-youtube>

It zooms into the video still rather than proportionally displaying it like the google i/o site header with the speaker holding the microphone. 

Any suggestions on how I can make my youtube video display look like the one in the https://events.google.com/io2015/ header?

[Eric Bidelman]

Hi Darin, 

We used paper-dialog (https://elements.polymer-project.org/elements/paper-dialog) with a google-youtube video inside it. Paper-dialog comes with a couple of transition animations out of the box. On the IO site, we also styled the dialog's content to take up the full screen: https://github.com/GoogleChrome/ioweb2015/blob/d2bb448b9bbb778817381a576b32516bc9c825fa/app/styles/main_sd.scss#L53

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/65713ac9-986f-43c0-a715-bba57e4a61d9%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.