【WordPress】任意の要素の背景にビデオを設定するVideo Background

WordPress

Video Background

March 26, 2017


Video Backgroundはウェブサイト上の任意の要素の背景に動画を設定することができるプラグイン。オーバーレイ、ループ再生、ミュートの設定も可能。

Video Backgroundプラグインを導入

ダッシュボード >> プラグイン >> 新規追加 >> Video Backgroundを検索
有効化にすると設定にVideo Backgroundが追加されます。

ショートコード

[vidbg container="body" mp4="#" webm="#" poster="#" loop="true" overlay="false" overlay_color="#000" overlay_alpha="0.3" muted="false"]
  1. container ビデオ背景にしたいフィールドを指定します。 Example:container=”.videowrap”
  2. mp4 .mp4ファイルへのリンク。Safari、IE Example:mp4=”https://example.com/video.mp4″
  3. webm .webmファイルへのリンク。Chrome、Firefox、Opera Example:webm=”https://example.com/video.”
  4. poster ビデオ背景がサポートされていない場合(スマホやタブレット)に代替画像を表示するために使用。 Example:poster=”https://example.com/uploads/2017/02/poster.jpg”

その他にもオーバーレイ、ミュートなどの設定が可能です。

Example

[vidbg container=”.videowrap” mp4=”https://example.com/ftr.mp4″ webm=”https://example.com/ftr.webm” poster=”https://example.com/450.jpg” loop=”true” overlay=”false” overlay_color=”#000″ overlay_alpha=”0.3″ muted=”false”]

<div class="videowrap" style="height: 50vh; width: 100%;"></div>

上記のようなショートコードとdiv要素を投稿に加える形で設定。

ソース

<script>
			jQuery(function($){
				var vidbgContainerValue = '.videowrap';
				var vidbgMp4Value = 'https://example.com/ftr.mp4';
				var vidbgWebmValue = 'https://example.com/ftr.webm';
				var vidbgPosterValue = 'https://example.com/450.jpg';
				var vidbgIsMuted = false;
				var vidbgIsLoop = true;
				var vidbgIsOverlay = false;
				var vidbgOverlayColor = '#000';
				var vidbgOverlayAlpha = '0.3';

				$(vidbgContainerValue).vidbg({
					'mp4': vidbgMp4Value,
					'webm': vidbgWebmValue,
					'poster': vidbgPosterValue,
				}, {
					muted: vidbgIsMuted,
					loop: vidbgIsLoop,
					overlay: vidbgIsOverlay,
					overlayColor: vidbgOverlayColor,
					overlayAlpha: vidbgOverlayAlpha,
				});
			});
		</script>
<div class="videowrap" style="height: 50vh; width: 100%;"></div>


表示すると上記画像のようになります。

Latest Posts

Related Posts