Display a video on polymer starter kit, adding a new nav item not displaying

[jordano1]

Description

Inexperienced polymerite here, just trying to get people to look at the library at my school and see how flexible and powerful it is.

My code for the issues below are here, this is just the basic starter kit with very minor edits

I've been spending quite a bit of time trying to figure out a way to display videos and update the polymer starter kit page,

1. like adding a new nav item, and having that nav item display new content.
2. and putting a video on the new page using the youtube API

I already have a repository with the files in question, in particular with the starter kit, we have myview1 - myview3, I added a video page called my-video.

I'm aware of this polymer api component but what I am struggling with is how do I implement this? Do I take the component:

<google-youtube
  video-id="..."
  height="270px"
  width="480px"
  rel="0"
  start="5"
  autoplay="1">
</google-youtube>

and just put it in my-video? How would I go about doing that?

example:

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

<dom-module id="my-video">
  <template>
    <style include="shared-styles">
      :host {
        display: block;

        padding: 10px;
      }
    </style>

    <div class="card">
      <div class="circle">video</div>

         <google-youtube
          video-id="..."
           height="270px"
          width="480px"
          rel="0"
           start="5"
           autoplay="1">
        </google-youtube>

    </div>
  </template>  

  <script>
    Polymer({
      is: 'my-video'
    });
  </script>
</dom-module>

I saw the demo but I was having some serious problems implementing that, because I'm so inexperienced and I'm not sure where to go to get more experience, I've already tried codelabs and videos but I'm not really picking it up as quickly as I'd hope.

As for the nav bar, the nav will locate the page and go to it, but it's not displaying anything. The code primarily edited is in my-app.html where I just threw in my-video element and link to my-video on lines 80 and 102.

I was getting 404's but that's because the link I put in my-app.html was:

        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="view1" href="/view1">View One</a>
          <a name="my-video" href="/my-video">Video</a>
          <a name="view2" href="/view2">View Two</a>
          <a name="view3" href="/view3">View Three</a>
        </iron-selector>

but then I changed it to

        <app-toolbar>Menu</app-toolbar>
        <iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
          <a name="view1" href="/view1">View One</a>
          <a name="video" href="/video">Video</a>
          <a name="view2" href="/view2">View Two</a>
          <a name="view3" href="/view3">View Three</a>
        </iron-selector>

Because I noticed the javascript looking for filenames because it was automatically putting 'my' in front of the URL to the file.

Here's a picture of the page i'm getting. There is content in there, it is just a p element with text in:

no display of this new nav item

Anyway, any help would be amazing.

TL;DR

I want to implement the youtube player in my polymer starter kit, and I want to add a new nav item to contain the google-youtube polymer element. How do I do this? I can't even get the element I created (my-video) to display anything

[oneezy]

Hey there!, Glad to hear you see the awesomeness of Polymer and Web Components! I've been trying to spread the word as well..so I ended up putting together a public Trello board packed with tons of useful resources: Polymer Learning.

---

For your initial request, have you seen the code lab that walks you through exactly what you're wanting to do? If not, have a look: https://codelabs.developers.google.com/codelabs/pwa-from-scratch/#0

It should definitely get you going.

---

Good luck!

[jordano1]

I'll look into this, thanks. I started that codelab for the video player but wasn't sure it was what I wanted, since it doesn't have you use the starter kit, since I'm having that basic error where I can't even add a nav element and get it working.

On Thu, Dec 1, 2016 at 9:17 PM, oneezy notifications@github.com wrote:

Hey there!, Glad to hear you see the awesomeness of Polymer and Web Components! I've been trying to spread the word as well..so I ended up putting together a public Trello board packed with tons of useful resources: Polymer Learning https://trello.com/b/g62bwZRn/polymer-learning.

For your initial request, have you seen the code lab that walks you through exactly what you're wanting to do? If not, have a look: https://codelabs.developers.google.com/codelabs/pwa-from-scratch/#0

It should definitely get you going.

Good luck!

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/PolymerElements/polymer-starter-kit/issues/950#issuecomment-264369701, or mute the thread https://github.com/notifications/unsubscribe-auth/AJ9DxRJeSMotM_AsIdXVc1x58JuNgi9Hks5rD5vFgaJpZM4LCIw5 .