google-youtube plays before paper-dialog-behavior is opened

[Darin Hensley]

Stackoverflow cross post

*Polymer 1.0*

I have this custom element  I made for playing youtube videos. It works great. But there two issues:

 1. the youtube video starts playing as soon as the index.html loads,

    rather than waiting for the `paper-dialog-behavior` to open. 

 2. closing the `paper-dialog-behavior` doesn't stop the video. I tried

        using the `pause` api for the `google-youtube` node but that is not

        a real fix(video should stop instead).

I could use the `google-youtube` api `play()` for the event listener `'iron-overlay-opened'`, but the `play()` method is not compatible with most android browsers and will create issues. 

How can I make the `google-youtube` element play only when `paper-dialog-behavior` opens and not on initial load? And same with dismissing the `paper-dialog-behavior`. 

   

 <link rel="import" href="../bower_components/google-youtube/google-youtube.html">
    <link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
    <link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
    <link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../bower_components/neon-animation/animations/fade-out-animation.html">
    <link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
    <link rel="import" type="css" href="../bower_components/paper-dialog-behavior/paper-dialog-common.css">
    <link rel="import" href="../bower_components/paper-styles/paper-styles.html">
   
    <dom-module id="video-player">
      <style>
         :host {
          @apply(--layout-fit);
         }
      </style>
   
   
      <template>
        <div id="insertVideoPlayer" class="layout vertical fit">
          <google-youtube style="height: 100%"
            video-id="YMWd7QnXY8E"
            rel="1"
            start="5"
            playsinline="0"
            controls="2"
            showinfo="0"
            width="100%"
            height="100%"
            autoplay="1">
          </google-youtube>
        </div>
         <paper-button dialog-dismiss style="color: white; margin-top: 0px">
          <paper-icon-button icon="arrow-back"></paper-icon-button>
        </paper-button>
      </template>
   
      <script>
        Polymer({
          is: "video-player",
          behaviors: [ Polymer.PaperDialogBehavior ],
          listeners: { 'iron-overlay-closed': 'bar' },
          bar: function(e) {
            console.log('hi');
            this.$$('google-youtube').pause();
          }
        });
      </script>
    </dom-module>

[Robert Stone]

>       autoplay="1">

Could that be the problem ? (I've never used the youtube control)

At a guess, you need to set that to 0 and then trigger the video to play once your element has been 'attached'

[Darin Hensley]

No, that is needed. Thanks though. I got the correct way to do it in the stackoverflow post.