Using Google Web Components elements in polymer 3

Question

How can we install Google Web Components elements in polymer 3

Example - using google-youtube or many more elements can't support npm install yet!

https://www.webcomponents.org/element/GoogleWebComponents/google-youtube

Is anyone figured out installing this for polymer 3.

Answer 1

well you can pull the component from github and used the polymer 3 modulizer to covert the element to a polymer 3 element and they just use it on to your application.

Answer 2

You could try to install it will polymer modulizer

npm install -g polymer-modulizer

you'll need to have bower installed as well, then in your repo you can run

modulizer GoogleWebComponents/google-youtube

that will download and convert the component to the folder modulizer_workspace

https://github.com/Polymer/polymer-modulizer#workspace-mode

Answer 3

simply:

npm install -g polymer-modulizer
git clone https://github.com/GoogleWebComponents/google-youtube.git
cd google-youtube
modulizer --out .

copy the new folder "google-youtube" and paste in your proyect in node_modules

Answer 4

The modulizer didn't work for me, thus if just simply used an iframe to integrate a video. Since I don't need any of the google-youtube webcomponent properties this works fine for my website.

<iframe 
  class="video-frame"
  src="https://www.youtube.com/embed/[[videoId]]"
  allowfullscreen="allowfullscreen"
  mozallowfullscreen="mozallowfullscreen" 
  msallowfullscreen="msallowfullscreen" 
  oallowfullscreen="oallowfullscreen" 
  webkitallowfullscreen="webkitallowfullscreen"
  frameBorder="0">
</iframe>

see also w3schools for additional query parameters like autoplay etc.