bingo!CMSで出来る動画の設定まとめ

※動画に関する注意
自動再生はChromeやSafariなどのブラウザの動画再生に関する設定に準拠します。
ユーザーのブラウザ環境により、想定した設定が反映されない可能性がありますのでご了承ください。

一番簡単な動画の設定方法

動画v17を使用する

  1. bingo!CMS管理画面にログインし、任意のページ編集画面を開きます。
  2. ページ編集用ツールバー/デザインユニットのプルダウンから動画v17のアイコンをドラッグ&ドロップでコンテナに配置します。
  3. 動画v17のユニット編集画面を開き、動画URL欄にYouTubeもしくはVimeoの動画URLを貼り付けます。
    ※動画URLの取得方法は動画v17のマニュアルをご覧ください。
  4. その他必要項目を設定し、保存します。

動画v17で出来る設定の例

サムネイル画像:設定なし
オプション設定:自動再生

サムネイル画像:設定あり
オプション設定:ポップアップ再生/レイヤー背景色(白)
※レイヤー背景色とはポップアップ再生時に表示される背景色のことです。

動画v17で出来る設定項目

PC スマホ
埋め込み再生
ポップアップ再生
×
ポップアップ再生時の背景色変更(白or黒)
×
ポップアップ再生時の表示サイズの指定
×
サムネイルを任意画像に変更
背景動画
×
×
再生方法(ユーザークリック)
再生方法(自動)
×
再生方法(マウスホバー)
×
×

タイトルやテキストと組み合わせたい

カスタムv17を使用する

  1. bingo!CMS管理画面にログインし、任意のページ編集画面を開きます。
  2. ユニットモード/ページ編集用ツールバー/デザインユニットのプルダウンからカスタムv17のアイコンをドラッグ&ドロップでコンテナに配置します。
  3. カスタムv17のユニット編集画面を開き、動画パーツのアイコンをドラッグ&ドロップします。
  4. 動画URL欄にYouTubeもしくはVimeoの動画URLを貼り付けます。
    ※動画URLの取得方法は動画v17のマニュアルをご覧ください。
  5. その他必要項目を設定し、保存します。

カスタムv17で出来る設定の例

組み合わせ例 1
sample sample sample
sample sample sample
sample sample sample
sample sample sample
sample  …

サムネイル画像:設定あり
オプション設定:設定なし(ユーザークリック)

組み合わせ例 2
sample sample sample sample
sample sample sample sample
sample sample simple  sample
sample sample sample sample
sample …
ひとつだけ違う単語がまぎれているよ

サムネイル画像:設定なし
オプション設定:自動再生
余白:上下左右に各30px

カスタムv17で出来る設定項目

PC スマホ
埋め込み再生
ポップアップ再生
×
ポップアップ再生時の背景色変更(白or黒)
×
×
ポップアップ再生時の表示サイズの指定
×
×
サムネイルを任意画像に変更
背景動画
×
×
再生方法(ユーザークリック)
再生方法(自動)
×
再生方法(マウスホバー)
×
×

グリッドレイアウトの一部で動画を使用したい

グリッドv17を使用する

  1. bingo!CMS管理画面にログインし、任意のページ編集画面を開きます。
  2. ユニットモード/ページ編集用ツールバー/デザインユニットのプルダウンからグリッドv17のアイコンをドラッグ&ドロップでコンテナに配置します。
  3. グリッドv17のユニット編集画面を開き、タブをデザインオプションに切り替えます。
  4. 詳細設定をクリックし背景の動画URL欄にYouTubeの動画URLを貼り付けます。
    ※動画URLの取得方法は動画v17のマニュアルをご覧ください。グリッドv17にVimeoの動画URLは設定できません。
  5. 動画の再生方法をscrollかhoverから選択します。
    ※scrollはページスクロール、hoverはマウスホバーで動画が再生されます。
  6. その他必要項目を設定し、保存します。

グリッドv17で出来る設定の例

スクロールで再生
ページをスクロールしてウィンドウに表示されると
自動で再生が始まります。
マウスホバーで再生
ここにマウスのカーソルを当てると動画が再生されます。
カーソルを外すと停止します。

グリッドv17で出来る設定項目

PC スマホ
埋め込み再生
×
×
ポップアップ再生
×
×
ポップアップ再生時の背景色変更(白or黒)
×
×
ポップアップ再生時の表示サイズの指定
×
×
サムネイルを任意画像に変更
×
×
背景動画
×
再生方法(ユーザークリック)
×
×
再生方法(自動)
×
再生方法(マウスホバー)
×

ページの一部に背景動画を使用したい

マルチコンテナに背景動画を設定する

  1. bingo!CMS管理画面にログインし、任意のページ編集画面を開きます。
  2. コンテナモード/ページ編集用ツールバー/コンテナのプルダウンからマルチコンテナのアイコンをドラッグ&ドロップします。
  3. マルチコンテナのコンテナ編集画面を開き、タブをコンテナ設定に切り替えます。
  4. 背景タイプのプルダウンを背景動画へ変更し、動画URL欄にYouTubeもしくはVimeoの動画URLを貼り付けます。
    ※動画URLの取得方法は動画v17のマニュアルをご覧ください。
  5. その他必要項目を設定し、保存します。

マルチコンテナで出来る設定の例

この例ではマルチコンテナに以下の設定をしています。
・パディングA 下:600px
・下方スペース:50px

マルチコンテナで出来る設定項目

PC スマホ
埋め込み再生
×
×
ポップアップ再生
×
×
ポップアップ再生時の背景色変更(白or黒)
×
×
ポップアップ再生時の表示サイズの指定
×
×
サムネイルを任意画像に変更
×
×
背景動画
×
再生方法(ユーザークリック)
×
×
再生方法(自動)
×
再生方法(マウスホバー)
×
×

ページの背景に常に動画を表示させたい

ページの背景に動画を固定する

  1. bingo!CMS管理画面にログインし、任意のページ編集画面を開きます。
  2. コンテナモード/ページ編集用ツールバー/コンテナのプルダウンからマルチコンテナのアイコンをドラッグ&ドロップします。
  3. マルチコンテナのコンテナ編集画面を開き、タブをコンテナ設定に切り替えます。
  4. 背景タイプのプルダウンを背景動画へ変更し、動画URL欄にYouTubeもしくはVimeoの動画URLを貼り付けます。
    ※動画URLの取得方法は動画v17のマニュアルをご覧ください。
  5. その他必要項目を設定し、保存します。
  6. ページ編集用ツールバー/このページのcssとjavascriptの設定をクリックします。
  7. スキンのデザインによって以下のどちらかを記述し保存します。

ナビゲーションがページ上部にあるスキンの場合

ナビゲーションがページ上部にある、一般的なデザインのスキンの場合は以下のように記述します。
<style type="text/css">
#container-outer-●●●● .bg-media-box {
position: fixed;
left: 0px;
}
</style>
※●●●●はマルチコンテナのIDに置き換えてください。

ナビゲーションがページの左右どちらかにあるスキンの場合

ナビゲーションが左右どちらかにあるデザインのスキンを使用している場合、背景動画の表示位置がずれて再生されることがあります。
その場合は以下を参考に記述し、ずれを調整してください。

例:ナビゲーションがページの左側にある場合
<style type="text/css">
#container-outer-●●●● .bg-media-box {
position: fixed;
left: ▲px;
width: calc(100% - ▲px);
}
</style>
※●●●●はマルチコンテナのIDに置き換えてください。
※▲にはナビゲーションの横幅の値を入力します。
※ナビゲーションがページの右側にある場合はleft: ▲px; をright: ▲px; に書き換えてください。

ページの背景に動画を固定する方法の設定例

以下のURLをクリックしてサンプルページをご覧ください。
ページをスクロールしても背景の動画は固定され、表示され続けます。

bingo!CMSで出来る動画の設定まとめ - ページの背景に動画を固定する

その他のTips

ページトップ