gistfile1.txt

<link rel="import" href="../../bower_components/polymer/polymer.html">

<link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
<link href="../../bower_components/core-icons/core-icons.html" rel="import">

<polymer-element name="demo-card">
  <template>
    <style>
      #frame {
        margin: 15px;
      }
      #frame:-webkit-full-screen {
        width: 100%;
        height: 100%;
      }
      :-webkit-full-screen #button {
        display: none;
      }
      #card {
        display: block;
        margin: 10px;
        width: 600px;
        overflow: hide;
        border-top-left-radius: 2px;
        border-top-right-radius: 2px;
        border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        box-shadow: rgba(0, 0, 0, 0.0980392) 0px 2px 4px, rgba(0, 0, 0, 0.0980392) 0px 0px 3px;
        background-color: rgb(255, 255, 255);
      }
    </style>
    <div layout horizontal center-justified>
      <div id="card">
        <div id="frame">
          <content></content>
          <div layout horizontal end-justified>
            <paper-icon-button id="button" icon="fullscreen"></paper-icon-button>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>

    Polymer('demo-card', {
      ready: function() {
        var fsTarget = this.$.frame;
        // Work around on-tap not working for fullscreen (non-user initiated).
        this.$.button.addEventListener("mouseup", function() {
          fsTarget.webkitRequestFullscreen();
        });
      }
    });
  </script>
</polymer-element>