ポリマー-Google Youtube

<google-youtube>は、YouTube動画プレーヤーを含む要素です。

<google-youtube
   video-id = "....."
   height = "300px"
   width = "300px"
   rel = "0"
   start = "2"
   autoplay = "1">
</google-youtube>

すべてのhttps://developers.google.com/youtube/player_parameters [埋め込みプレーヤーパラメータ]は google-youtube でサポートされており、それぞれを google-youtube の属性として設定できます。

次の表に、カスタムプロパティを示します。

Sr.No.

Custom property & Description

Default

1

--google-youtube-container

コンテナdivに使用されるmixinです。

\{}

2

--google-youtube-thumbnail

これは、ビデオのサムネイルに使用されるミックスインです。

\{}

3

--google-youtube-iframe

これは、埋め込みフレームに使用されるミックスインです。

\{}

例

google-youtube要素を使用するには、コマンドプロンプトでプロジェクトフォルダーに移動し、次のコマンドを使用します。

bower install PolymerElements/google-youtube --save

上記のコマンドは、bower_componentsフォルダーにgoogle-youtube要素をインストールします。次に、次のコマンドを使用して、google-youtubeファイルをインデックスにインポートします。

<link rel = "import" href = "/bower_components/google-youtube/google-youtubel">

次の例は、google-youtube要素の使用方法を示しています。

<!DOCTYPE html>
<html>
   <head>
      <title>google-youtube</title>
      <meta charset = "UTF-8">
      <script src = "bower_components/webcomponentsjs/webcomponents.js"></script>
      <link rel = "import" href = "/bower_components/google-youtube/google-youtubel">

      <style>
         .youtube {
            margin: 10px 10px 10px 5px;
         }
      </style>
   </head>

   <body>
      <google-youtube
         class = "youtube"
         video-id = "MaWcS-10NIw"
         height = "200px"
         start = "3"
         width = "400px">
      </google-youtube>
   </body>
</html>

出力

アプリケーションを実行するには、プロジェクトディレクトリに移動し、次のコマンドを実行します。

polymer serve

ここでブラウザを開き、 http：//127.0.0.1：8081/ に移動します。出力は次のようになります。

Google Youtube

Polymer-google-youtube

ポリマー-Google Youtube

例

出力