Custom Element Using paper-dialog- better way to do this?

[Darin Hensley]

stackoverflow cross post

Polymer 1.0

I have a custom element `video-player` which uses `paper-dialog`.

They way it is now, seems kind of hacky. I have a external button(it has to be a external button for my design) that opens it with: 

    bob = Polymer.dom(this.root).querySelector('video-player');
    bob.querySelector('paper-dialog').open()

---------------------------------------------------

    <link rel="import" href="../bower_components/paper-dialog/paper-dialog.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/google-youtube/google-youtube.html">
    <link rel="import" href="../bower_components/polymer/polymer.html">
   
    <dom-module id="video-player">
      <template>
        <paper-dialog>
          <div class="layout horizontal">
            <paper-button dialog-dismiss>
              <paper-icon-button icon="arrow-back"></paper-icon-button>
            </paper-button>
          </div>
          <div style="height: 100%; width: 100%">
            <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-dialog>
      </template>
   
      <script>
        Polymer({
          is: "video-player"
        });
      </script>
    </dom-module>
   
    </paper-dialog>

I can not inherit the `paper-dialog` behavior(which would be `iron-overlay` because it won't relate to that specific `paper-dialog` element.

Since this seems kind of hacky, is there a better way to do this?