ビジネスのホームページに短い説明ビデオが含まれていない場合、それは時代遅れで当たり障りのないものとみなされます。 最近では、短いビデオを掲載していない Web サイトに遭遇することは非常にまれです。 この記事では Elementor でビデオを管理する方法について説明しているため、短いビデオを含めるにはこの記事が必要です。 この記事では、ビデオ ウィジェットとビデオ背景のオプションを拡張しました。
- 自己ホスト型ビデオと Dailymotion ビデオのサポート
- 自己ホスト型ビデオの利点:
- ビデオウィジェットと背景の開始時間と終了時間
- 控えめなブランディング
- Elementor にビデオ背景を追加する
- モバイル編集の改善
- モバイルとタブレットのブレークポイントを変更する
- WP CLIの統合
- グーテンベルクの包含
- UAE によるスティッキー ビデオ
- ビデオを粘着力のあるものにする方法は?
- ビデオサイズ
- スティッキーアライメント
- ビデオの間隔
- 背景のサイズとスタイル
- 情報バー
- レスポンシブデバイスでスティッキービデオを管理する
- 画面上のどこにでもドラッグ
- 閉じるボタン
- 結論
自己ホスト型ビデオと Dailymotion ビデオのサポート
Elementor では、YouTube や Vimeo のビデオを埋め込むだけでなく、自己ホスト型の HTML5 ビデオや Dailymotion ビデオも含めることができるようになりました。
自己ホスト型ビデオの利点:
- プライバシーと管理: GDPR やその他のプライバシー関連の問題により、自己ホスト型ビデオの重要性がますます高まっています。 これらのビデオのコンテンツを制御できます。
- 所有権: 自己ホスト型ビデオを使用すると、他の人が作成したコンテンツに依存する必要がなくなります。 あなたのビデオについては、著作権の問題が発生しないことを 100% 確信できます。 また、動画が削除されるリスクもありません。
- パーソナライゼーション: セルフホスティングを使用すると、ビデオにロゴや外部リンクが表示されなくなります。 これにより、よりプロフェッショナルに見える高品質のコンテンツを含めることができます。 動画は、サイトの訪問者を惹きつけるのに非常に役立ちます。
- UX: 自己ホスト型ビデオでは、訪問者に広告や推奨ビデオが表示されなくなります。 彼らの気が散ったり、競合他社にリダイレクトされたりすることはありません（提案/推奨ビデオを通じて）。
ビデオウィジェットと背景の開始時間と終了時間
サポートされているプラットフォームでビデオ ウィジェットの開始点と終了点を設定できます。 ビデオの背景を選択して、ビデオの選択された部分のみが再生されるようにすることもできます。 この機能を利用すると、ビデオの関連部分を非常に簡単にループすることができます。 選択したコンテンツを訪問者にループ表示できます。
控えめなブランディング
たとえば、YouTube からビデオを埋め込んでいて、そのビデオから YouTube ロゴを非表示にしたい場合は、「控えめなブランディング」を選択して、埋め込まれた YouTube ビデオからロゴを非表示にすることができます。
Elementor にビデオ背景を追加する
このセクションでは、Elementor にビデオを追加する方法を説明します。
Elementor エディターを押して、パネルに移動します。 ここから、「ビデオ」を検索し、ビデオ ウィジェットをドラッグします。
- Elementor > パネル > 「ビデオ」を検索 > 「ビデオウィジェット」をドラッグ
- [ビデオ] > [ソース] で、[YouTube]、[Dailymotion]、[Vimeo]、または自己ホスト型のいずれかを選択します。
- 次に、ビデオへのリンクを追加します。 ビデオが自己ホストされている場合は、メディア ライブラリを参照するか、外部 URL を使用してアップロードできます。
- ビデオの特定の部分を再生したい場合は、開始時間と終了時間を選択できます。
- 画像オーバーレイを追加して、選択したサムネイルを追加することもできます。
モバイル編集の改善
モバイルとタブレットのブレークポイントを変更する
長い間、人々はモバイルやタブレット上のビデオにブレークポイント値を自由に設定できることを望んできました。 朗報です!! 解決策はここにあります。
ビデオを追加した後、上のセクションで示したように、Elementor のタブレットとモバイルのブレークポイントの値を変更できます。 革新的なブレークポイント機能を利用すると、ワイドスクリーンのコンピューター、ラップトップ、タブレット、または小さなモバイル画面に合わせてサイトをカスタマイズできます。
ブレークポイント値を変更するには、次の場所に移動します。
Elementor ダッシュボード > 設定 > スタイルの順に選択し、「タブレット ブレークポイント」と「モバイル ブレークポイント」の新しい値を入力します。
そして出来上がり！
あっという間にやり遂げましたね。
WP CLIの統合
WordPress のコマンドライン インターフェイスである WP-CLI は、WordPress 管理者で実行するさまざまなアクションにコマンドライン インターフェイスを提供するオープンソース プロジェクトです。 開発者はそれをよく知っています。
したがって、WP-CLI を使用すると、ランダムな端末から長いリストのタスクを実行できます。 こうすることで、管理者端末にログインする必要がなくなります。
Elementor には統合 WP-CLI が付属するようになりました。 この WP-CLI の統合により、コマンド ラインから次のタスクを実行できるようになります。
- lush_css – Elementor Page Builder CSS キャッシュをフラッシュします。
- 同期ライブラリ – 同期エレメンター ライブラリ
- replace-URLs – すべてのElementorページで古いURLを新しいURLに置き換えます
- ライセンスのアクティブ化または非アクティブ化 - Pro ライセンスをアクティブ化または非アクティブ化します。
- import-library – テンプレート ファイルをライブラリにインポートします
Elementor には今後も CLI コマンドが追加されていく予定です。
グーテンベルクの包含
今後数か月以内に、Gutenberg もコアに追加され、Elementor は完全なパッケージになります。
Gutenberg のリリースにより、Elementor はすべての Elementor ユーザーにとってさらにスムーズに動作するようになります。
バージョン 2.1 では、Gutenberg 内でおなじみの「Elementor で編集」ボタンを使用するため、Gutenberg と Elementor を簡単に切り替えることができます。
UAEによるスティッキー ビデオ
ページをスクロールしているときに、ビデオ コンテンツが左右に飛んだり、単に動かないままになったりすることを想像してください。
きっともどかしい光景だろう。
もうそうじゃない。 UAE の Sticky Videoの素晴らしい機能により、スクロール中にビデオがページに貼り付けられるため、ビデオがブラウザ ウィンドウの左側または右側に沿って浮かぶことになります。 スティッキー ビデオ機能を使用すると、訪問者がスクロールしてコンテンツを読んでも、ビデオとテキスト コンテンツがフォーカスされたままになります。
ビデオを粘着力のあるものにする方法は?
UAEの機能により、この機能がエレガントかつシンプルになりました。 ビデオをスティッキーにするには、コンテンツ (タブ) > スティッキー ビデオ設定でスティッキー ビデオを切り替えるだけです。
スティッキービデオ機能には、ビデオのさまざまな配置オプションがあります。 アクション バーと設定に移動して、スティッキー ビデオのあらゆる側面を制御します。 主な機能を以下に示します。
- ビデオサイズ
- 端までスティッキービデオを実現するためのさまざまな位置調整オプション
- ビデオの間隔とスタイルを管理します。
- ビデオの背景を追加する
- 情報バーを使用してビデオの説明を表示します
- レスポンシブなサポート
- フロントエンドのウィンドウ上でスティッキービデオをドラッグします
- 閉じるボタンのカスタマイズ
ビデオサイズ
ビデオの幅をピクセル単位で指定することで、ビデオの高さと幅を調整できます。 ビデオ表示は、ビデオに設定されたアスペクト比に従って適用されます。 ビデオのアスペクト比は、[コンテンツ] (タブ) > [ビデオ] から制御できます。
例 – 16:9 の比率を設定した場合、スティッキー ビデオのサイズは選択した比率に従って適用されます。
スティッキーアライメント
配置、つまりウィンドウの端を横切るスティッキービデオの位置を管理できます ビデオは次のように配置できます。
- 右上
- 左上
- 右下
- 左下
- 中央右
- 中央左
ビデオの間隔
端からの間隔を変更して、ビデオの周囲の間隔を制御できます 間隔は、選択したスティッキー配置に従って適用されます。
たとえば、左下配置の場合、間隔はビデオの下端と左端からのみ適用されます。
背景のサイズとスタイル
UAEの最も良い点は、選択した背景をビデオに追加できることです。 背景のサイズや色も選択できます。
情報バー
ビデオのメタデータの種類ごとに簡単な説明が記載されています。 UAEを使用すると、スティッキー ビデオの下に情報テキストを追加できます。 各スティッキー ビデオを説明すると、現在再生中のビデオに関する情報が表示されます。
情報バーを使用すると、ビデオの色、背景色、タイポグラフィー、パディングを制御することもできます。 テキスト フィールドは HTML コンテンツをサポートします。 カスタム スタイルを情報バーのコンテンツに適用することもできます。
レスポンシブデバイスでスティッキービデオを管理する
スティッキー ビデオを非表示にするオプションがあります。 スティッキービデオを非表示にするさまざまなデバイスを選択できます。
画面上のどこにでもドラッグ
この機能を使用すると、ビデオ画面をどこにでもドラッグできます。 ビデオをクリックしてドラッグするだけで、ビューポート内の任意の場所に配置できます。 UAEは、デフォルトで任意の場所にドラッグする機能をサポートしています。
注: モバイル デバイスと Elementor のバックエンド エディターはドラッグ機能をサポートしていません。
閉じるボタン
スティッキービデオの閉じるボタンを有効/無効にできます。 閉じるボタンのスタイルを管理するために使用できるコントロールもあります。
結論
UAEを利用すると、好みに応じてスティッキー ビデオのスタイルを設定したり変更したりできます。 プラグpluginすると、手順全体が非常に簡単になります。 これは、サイトのグラフィック コンテンツを充実させるための非常にエレガントなソリューションです。 Web サイト上で素晴らしい粘着ビデオを作成し続け、ページをスクロールしている訪問者を Web ページに引き付けましょう。
