WordPressでフルスクリーンの背景としてビデオを追加する方法

公開: 2019-02-01

ビデオは素晴らしいです、彼らはより多くのキャッチメディアを提供し、写真よりも多くの感情を捉えます。

今日、ますます多くのウェブマスター/ブランドが彼らのウェブサイトの完全な背景としてビデオを埋め込むことに向かって動いています。ただし、ビデオを背景に埋め込む複雑さには、技術的な専門知識が必要です。

すべてをシンプルで読者にとって素晴らしいものにするために、背景に埋め込まれたビデオへの無料プラグインをリストし、簡単な構成でビデオを背景に埋め込む方法についての詳細なチュートリアルも行います。

注：コンテンツを完全に理解するには、ある程度のコーディング経験が必要です。何か混乱しているように思われる場合は、コメントで気軽に質問してください。

WordPressでフルスクリーンの背景としてビデオを追加するプラグイン

プラグインは素晴らしく、数回クリックするだけで必要な機能を提供します。コーディングを使用してビデオをバックグラウンドに埋め込む方法の詳細なチュートリアルに進む前に、いくつかのプラグインをリストします。

1.バックグラウンドビデオ用のmb.YTPlayer

バックグラウンド統合用の人気のあるビデオプラグインの1つ。プラグインは、ページの要素内にカスタムプレーヤーを統合します。

プラグインを使用すると、ユーザーはビデオをページに簡単に統合して投稿できます。インストールは簡単で、プラグインは簡単に統合できるようにショートコードを生成します。

プラグインはレスポンシブレイアウトを完全にはサポートしていません。

詳細とダウンロード| デモ

2.アニメーション効果のあるスライダーヒーロー

スライダーヒーロー

プラグインの目的は、スライダー効果を使用してビデオの背景をWordPressに埋め込むことができるようにすることです。プラグインは、11の背景アニメーション、背景音楽を追加する機能、YouTubeとVimeoのビデオ統合などを提供します。

プラグインは、GutenbergなどのWordPressテーマまたはエディターと互換性があるため、すべてのWordPressWebサイトで応答性が高く高速です。

詳細とダウンロード| デモ

さて、本当の部分が来ます。次のパートでは、WordPressプラットフォームのコーディングと技術的な作業が必要です。

ビデオの埋め込みには多くの手順が必要です。手順を1つずつ見ていきましょう。これらの手順を理解すると、単純なものがどれほど複雑になる可能性があるかを把握できます。

1.Divを使用してビデオ用のスペースを作成します。

2.ビューポートの左上にあるDivの位置を絶対または固定で取得します。次のステップは、高さと幅を100％に設定してから、z-indexを1に設定することです。Z-indexはコンテンツの深さを定義します。

3.JavaScriptを使用したDivビデオのスケーリング。

4.ユーザーがビデオを拡大縮小するたびに、モニター画面のサイズが変更され、再びビデオが拡大縮小されます。

5.コードがさまざまなブラウザとモバイルOSで機能することを確認します。

多くのコーディングのように見えますが、WordPressの投稿またはページの背景にビデオを埋め込むプロセスを自動化するために、単純なカスタムプラグインを使用します。

BGVIDEO：ダウンロード

プラグインをダウンロードして、通常のインストールを続行します（他のプラグインのインストールと同じように）。

このシンプルなプラグインはショートコードと連携して動作し、「bgvideo」という名前のショートコードがプラグインで利用できます。ショートコードは、任意のページまたは投稿にビデオを埋め込むためのゲートウェイとして機能します。

先に進む前に、完全な機能のためにいくつかのパラメータをショートコードにフィードする必要があります。

パラメータは、height、width、mp4、webm、ogg、autoplay、loop、muted、fixedです。高さと幅は、それぞれビデオの高さと幅を表します。 mp4、webm、oggフィールドは、それぞれのビデオ形式のURLを参照します。ビデオが複数のデバイスで問題なく実行されるように、各形式のURLを指定する必要があります。

メディアライブラリへのビデオの追加

次のステップには、メディアライブラリへのビデオの追加が含まれます。メディアライブラリにすべての形式（webm、ogg、mp4）を追加してください。

bgvideoの助けを借りて、ビデオショートコードはbgvideoに変換されます。

ビデオのショートコードは次のようになります

[％video width =” 1280” height =” 720” mp4 =” http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.mp4”] [/ video] [％video width =” 1280” height =” 720” webm =” http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.webm”] [/ video]
<a％href =” http://www.85ideas.com/wp-content/uploads/2014/09/videobackground-test.jpg”> <img％class =” alignnone size-large wp-image-1392” src =” http://www.test.dev/wp-content/uploads/2014/09/videobackground-test.jpg” alt =” video-background-test” width =” 1024” height =” 576” />

ビデオショートコードとアンカータグの前にあるパーセント（％）記号を削除することを忘れないでください。

bgvideoの助けを借りて、上記のコードは以下のコードに変換されます

[bgvideo width = "1280" height = "720" 
  mp4 = "http://www.test.dev/wp-content/uploads/2014/09/rainier.mp4" 
  webm = "http://www.test.dev/wp-content/uploads/2014/09/rainier.webm" 
  Poster = "http://www.test.dev/wp-content/uploads/2014/09/rainier-cover-1024x576.jpg" 
  fixed = "no"]

プラグインは、ビデオショートコードをbgvideoショートコードに自動的に変更します。

ビデオをユーザーに透過的にする

すべての設定が完了したら、ページのCSSプロパティで少し魔法をかける必要があります。その理由は、ページのコンテンツがビデオの表示を妨げるという事実です。

CSSはページのコンテンツを削除し、訪問者のためにビデオを輝かせます。

以下のCSSコードを挿入して、すべてが正常に機能するようにします。

＃ページ{
背景：なし;
}

ビデオの背景を完全に設定するために必要な他の多くの微調整があります。

要約

読者にとって最善の策は、本格的なプラグインを使用し、コーディング部分を無視することです。コーディング部分は、コーディングを知らない場合にのみ事態を悪化させます。ニーズを開発者に転用することはできますが、それは無料ではありません。

もう1つの優れた代替ソリューションは、アニメーションGIFを背景として使用することです。アニメーションGIFの使用を表す2つの理由があります。 1つ目はビデオと比較して低帯域幅の使用法であり、2つ目は簡単にインストールできます。もう1つの大きな利点は、移植性やその他のデバイスの互換性の問題について心配する必要がないことです。

アニメーションは、CSSを使用して簡単に作成することも、通常の背景を変更してアップロードすることもできます。

ビデオの背景の複雑さは少し高い側にあり、WordPressコミュニティまたはコアチームはそれに注意して、今後のリリースで変更を加えることができます。

あなたがビデオを持っていて、gifに変換したいなら、あなたのためにそれをすることができるオンラインリソースがあります。ただし、変換されたGIFは最適化されておらず、非常に重要です。

また、埋め込む予定のビデオを調整する必要がある場合は、無料の優れたビデオエディタをいくつか見つけることができます。ビデオの切り取り、切り抜き、ズーム、テキストの追加、またはWebサイトのスタイルに一致するようにカラーテーマを調整する必要がある場合があります。

VSDC-Windows用の無料ビデオ編集ソフトウェア

Macを使用している場合は、当然、コンピュータにプリインストールされているiMovieを使用できます（そうでない場合は、無料で入手できます）。また、Windowsを使用している場合は、VSDC FreeVideoEditorが最適です。基本的な分割/トリミングツールセットから色補正やビデオスタイルのプリセットまで、文字通り必要なものがすべて揃っています。さらに、フォーマットに関しては非常に強力であり、出力ファイルの品質を犠牲にする必要はありません。

あなたは、私が何かを逃したと思いますか？以下にコメントしてお知らせください。

*最終更新日：2019年2月25日