webflowの使い方　第5弾
今回はYouTube動画の設置方法を説明していきます。
webflow universityで実装方法を調べ実際に作ってみました。
備忘録として、そしてこれから実装する方のサポートになれば幸いです。

YouTube動画を設置とは？

webflow youtube 設置

ページ内にyoutube動画を設置した状態です。
webflowではあらかじめ用意されたyoutubeエレメントを使用して、
簡単に実装する事ができます。

webflowのyoutubeエレメントで出来ること

・動画の自動再生
・音声のミュート
・動画のスタート時間設定
・プレーヤーコントロールのオフ
・プライバシーモード（Cookieを使用しない）
・関連する動画の制限

webflowでyoutube動画を設置する方法

webflowでyoutube動画を設置していきます。

1.左のメニューバーから、youtubeエレメントを選択します。

webflow youtube 設置

Mediaの中にあるYoutubeエレメントをクリック
これで、youtubeの要素を追加できました。
右のメニューバーから、設定を開きます。

2.Youtube動画を選択 & 設定します。

webflow youtube 設置

設定が開かれると、様々な項目があります。

URL 使用したいyoutube動画のURLを載せる
Start at 動画が開始される時間の設定
Mute 音声をミュート
Autoplay 自動再生
Show player controls プレイヤーコントロールのオンオフ

では、URLにyoutubeの動画をコピペします。

これでyoutube動画の設置は完了です。

youtube動画のサイズを調整する

youtube動画はアスペクト比を維持したままサイズ調整が行われます。
サイズを設定する場合は、指定サイズのdivブロックを作成し、その中に要素を設置します。
※webflow university参照

youtube動画を自動再生する方法

デフォルトでは動画の自動再生はされません。
自動再生の設定をするには、2つのチェック項目を入力します。

1.Autoplay
2.Mute

自動再生は特定のブラウザでは制限されており、ミュートを有効にする場合があります。
google chromeでは上記の設定をしないと、自動再生はされませんでした。

（プレビューモードに切り替えて、自動再生が開始されています。）

まとめ

結論: webflowでyoutube動画の設置方法は、

エレメントからYoutubeを選択し、設定からURLを入力。
サイズ調整や自動再生等の設定をYoutube Settingsから行う。

相変わらず、簡単に実装ができました。
webflowにはVideoエレメントや、backgtound Videoエレメントもあります。
background Videoは30MB以下限定なので、サイトを軽く動かしたいのであればyoutube動画を自動再生させた方が
無難なのかな？と思います。自由に使い分けていきましょう。

今回の実装方法はwebflow universityを参考にしています。
実装内容は大したことでは無いかもしれませんが、
webflowを学びたい人のサポートに少しでもなれたら幸いです。