Tips: 動画を直接アップロードする
mp4やwebm形式の動画(各ファイル1GBまで)をエディタにアップロードして、ページ上に直接配置することもできます。
詳細は動画ボックスの特徴と操作方法をご覧ください。
その際は、プランごとのエディタ内のストレージ容量の制限にご注意ください。
YouTube動画埋め込みの制限
YouTube動画の利用にはいくつかの制約があります。
動画のロード時やマウスホバー時にタイトルや再生バーが表示されます。
モバイルデバイスでの自動再生はYouTubeの仕様により制限されています。デスクトップのみ有効です。
YouTubeやVimeoの動画を音声ありで自動再生する場合、ブラウザ側のポリシーによって制限されることがあります。
例えばChromeブラウザでは、音声付き自動再生には特定の条件が必要で、条件を満たさない場合は、コードに
autoplay=1&muted=0などのパラメータを付けても、音声は再生されません。
参照:
代替案:ブラウザの制限をStudio側で回避することはできませんが、以下の2つの方法を検討できます。
音声なし(ミュート)で自動再生する
自動再生を設定せず、再生バーを表示して訪問者が手動で再生できるようにする
YouTube動画の埋め込み手順
(1) YouTube側でリンクを取得する
YouTubeを開き、動画ページのアドレスバーから再生ページのURLをコピーします、
(例:https://www.youtube.com/watch?v=xxxx)。
注意:「https://youtu.be/xxxx」形式のURLでは埋め込みが上手くいきません。
(2) 埋め込みボックス(Embedボックス)を配置する
ナビゲーションで追加アイコンをクリックします。
[基本]タブをクリックします。
[埋め込み]セクションから[YouTube]の埋め込みボックスをクリックします。
YouTube用の埋め込みボックスがスクリーン上に配置されます。
(2) URLを差し替える
(1)で配置したYouTubeボックス(Embedボックス)を選択します。
右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。
[動画URL]の入力欄に入っているURLを削除し、(2)でコピーしたURLを貼り付けます。
ライブプレビューURLを開き、動作確認を行います。
公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。投稿内容がエディタ上に反映されない場合、ブラウザの更新(リロード)をしてください。
再生ボタン・再生バーの非表示と自動・ループ再生設定方法
埋め込みコードを編集すると、表示や再生方法のカスタマイズが可能です。
ここでは、再生ボタン・再生バーの非表示と自動・ループ再生の設定方法をご紹介します。
下記コードを編集します。
xxxxの部分2箇所を、埋め込みたい動画のID(URLのwatch?v=xxxxの部分)に置き換えます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/xxxx?rel=0&controls=0&showinfo=0&autoplay=1&loop=1&playlist=xxxx&mute=true" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
このコードでも、YouTubeロゴは残ります。
ページに配置したYouTubeボックス(Embedボックス)を選択します。
右パネル上で[埋め込み]タブを選択します。右パネルが閉じている場合は開いてください。
[埋め込みコード]の入力フィールド内で[エディタを開く]をクリックします。
[埋め込みコードを編集]画面の左側で、もともと入っている文字を削除し、1でコピーしたコード貼り付けて[保存]します。
公開済みのサイトを編集していた場合は、サイトを更新します。 更新するまで、変更内容は反映されません。投稿内容がエディタ上に反映されない場合、ブラウザの更新(リロード)をしてください。
関連記事(Studioサイトへの外部アップロード動画設置について)
video play mp4 mov
ビデオ ムービー ユーチューブ





