3

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.

Ankit Maheshwari
  • 1,620
  • 6
  • 28
  • 55

4 Answers4

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

fernandopasik
  • 9,565
  • 7
  • 48
  • 55
  • Thanks! I'll try this. Can we do something to convert other components like - https://github.com/FabricElements/skeleton-carousel ...? – Ankit Maheshwari May 22 '18 at 10:08
  • 1
    Getting error on running - modulizer GoogleWebComponents/google-youtube :: Unhandled Rejection at: Promise Promise { Error: --npm-version required – Ankit Maheshwari May 22 '18 at 10:32
1

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

HerberthObregon
  • 1,811
  • 19
  • 23
  • Thanks! I'll try this. Can we do something to convert other components like - https://github.com/FabricElements/skeleton-carousel ...? – Ankit Maheshwari May 22 '18 at 10:08
  • After following and import .. import '@polymer/google-youtube/modulizer_out/google-youtube.js'; Error: Uncaught ReferenceError: Polymer is not defined at google-youtube.js:42 – Ankit Maheshwari May 22 '18 at 10:26
  • try add this line in JS file, import {Polymer,html} from "@polymer/polymer/polymer-legacy.js"; ++++ AND++. make sure Polymer({ _template: html` ++++ NOT +++ Polymer({ _template: Polymer,html` – HerberthObregon May 23 '18 at 00:37
1

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.

cuda12
  • 600
  • 3
  • 15
0

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.

Jobizzness
  • 84
  • 1
  • 4