Stackoverflow cross post
<http://stackoverflow.com/questions/31543770/google-youtube-plays-before-paper-dialog-behavior-is-opened>
*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>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/55cdb237-6b11-4934-982e-00d2560e5ae4%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
