WordPressのポップアップでYouTubeビデオを開く方法を知りたいですか?

La ライトボックス またはモーダルウィンドウ(ポップアップ)は、ネット上で非常に一般的な機能です。 ただし、通常は、画像、電子メール キャプチャ フォーム、プロモーション、さらには登録フォームを表示するために使用されます。 

しかし、それを使用してビデオを表示することも可能であることをご存知でしたか WordPress ? なし? 

心配ありません。このチュートリアルでは、ビデオの表示方法を紹介します。 (YouTube – Vimeo –など) で ライトボックス.

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

使用すべき理由 動画を表示するライトボックス 

レス ライトボックス はモーダルウィンドウですが、表示されているすべての画像がロードされているわけではありません。 « 積載«  ページ。 

Le ナビゲーター チャージ レ 画像 いつ ライトボックス が開きます。これはビデオにも当てはまります。 要するに、それはその機能です あなたのページがより速く開くことを可能にします。 また、サイズを小さくすることができます (longueur)ページのこのモーダルウィンドウでは、このページのコンテンツの一部が利用可能になるためです。

おしゃべりの停滞、ビジネスに取り掛かろう。

インストールと設定方法 プラグイン WPビデオライトボックス

WPビデオライトボックスは プラグイン WordPress.orgで入手できます。 つまり、WordPressダッシュボードから直接インストールできます。 ダウンロードする .zipファイルとして.

詳細については、 WordPressプラグインのインストール方法に関するステップバイステップガイドを確認してください.

アクティベート後 プラグイン、この場所から設定ページに移動します " 設定 >> ビデオ ライトボックス '。

直接「 prettyPhoto '。

現実には、これ プラグイン 別のものを使う プラグイン、主にフォトギャラリーの表示を目的としています。 ただし、ビデオに適用される情報の一部を変更できます。

そのために、いくつかのオプションを説明します (必須)あなたが望むようにそれがされるようになっています。

すでに書店 prettyPhoto アクティベートする必要があります (チェック« 有効にします prettyPhoto »)同じページにいることをユーザーに知らせるために、ウィンドウを透明にすることができます (定義します 0から1の値。 コンマ値が受け入れられます).

発見 WordPressの効果的なポップアップの特徴 

すべてのライトボックスに表示可能なタイトルを付けることができます (ショー タイトル). 大きなモーダルウィンドウの場合、サイズ変更を許可する必要がある場合があります (次を許可します。 リサイズ). そして、長い動画の場合、ユーザーはそれらを拡大することができます (次を許可します。 詳細)、より良い時計を見る.

幅と高さは ライトボックス、フィールドを編集できます " デフォルト  "そして" デフォルト 高さ '。 

のテーマを選択するには ライトボックス、ドロップダウンメニューを変更します テーマ "。 自動再生を有効にすることも可能です (ボックスにチェックを入れます」 自動再生 »).

ポップアップでYoutubeビデオを開く-define-les-regalges

どのように表示するか ライトボックス 記事で

Le プラグイン のリストを提案する ショートコード それはあなたが表示することを可能にします ライトボックス 記事の中で。 で利用可能なビデオも見ることができると言うのを忘れました Vimeoの.

ビデオを見るには YouTube ou Vimeoのあなたが使用する必要があります ショートコード 以下:

[video_lightbox_youtube] (pour YouTube)
[video_lightbox_vimeo5] (pour Vimeo)

これらのそれぞれ ショートコード パラメータを受け入れます。これにより、次のことが可能になります。

  • 識別子を定義する (video_id) 通常この形式のビデオの YzqKMmQ_3Sg '。 例 [video_lightbox_youtub VIDEO_ID = "YzqKMmQ_3Sg"]
  • ビデオの高さを設定する (高さ)
  • ビデオの幅を設定します ()
  • 説明を追加 (説明)
  • HTMLアンカーを追加する (アンカー)、またはウィンドウを開くリンクのテキスト
  • サムネイルを追加する (auto_thumb)

HTMLアンカーを設定すると、サムネイルは無視されます。 そうでなければ、 auto_thumb 値を取る 1 '。

また発見することでさらに進んでください ショートコードのワードプレスを使用して管理する方法

使用のデモ

情報を提供したばかりで、次のようなコードを使用してビデオを表示できます。

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480anchor="Une simple vidéo" description="Par Dr WP"]

同様の結果のために

プレゼンテーションのために、結果

このようなコードを使用して、上記のようにサムネイルを表示できます。

[video_lightbox_youtube video_id="YzqKMmQ_3Sg&rel=0width="640height="480auto_thumb="1description="Par Dr WP"]

これと同じ結果を得るには

ミニチュア・砂丘ビデオ

出る前に

いくつかのパラメータが ショートコード 設定で定義されたものを上書きします。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 FileBird

ファイルバード

WordPress FTP にアップロードした何千もの画像、ビデオ、またはドキュメント ファイルの管理に苦労したことはありませんか? はいかいいえかは関係ありません。重要なことは、 WordPressのプラグイン FileBird を使用すると、メディア ファイルを簡単に管理し、ライブラリの機能を強化できます。

シームレスなユーザーインターフェイスとコンテキストメニューにより、ユーザーはファイルをフォルダーにドラッグアンドドロップしたり、コンピューターで行うのと同じ方法でフォルダーをすばやく作成、名前変更、または削除するために必要な権限を持つことができます。 このプラグインを使用すると、メディアファイルが体系的に整理され、ページに挿入したり公開したりする画像を簡単に選択できます。

私たちも発見 あなたの記事に新しい命を吹き込むための6つのWordPressプラグイン

さらに、このプラグインは、特に人気のあるプラグインと完全に互換性があります。 WooCommerce、および多数の言語もサポートしています。 したがって、メディア ライブラリの管理を強化したい場合は、 WordPressのプラグイン FileBird はあなたの秘密兵器になるかもしれません。

ダウンロードデモ ウェブホスティング

2.ソーシャルシェア&ロッカープロ

Social Share&Locker Proプラグインは、Webサイトがソーシャルメディアでより目立つように設計されています。 数回クリックするだけで、ソーシャルアイコンの位置を設定するか、提供されているソーシャルネットワークのXNUMXつで共有を要求することでコンテンツをロックできます。

Social Share Locker Pro WordPressプラグイン

最も一般的な要望をカバーする10個のテンプレートがあります。 彼女のモデルはすべて完璧で、素晴らしく機能します。 また、Social Share&Locker Proを使用すると、ソーシャルネットワークのフルネームまたはアイコンのみを表示できます。 それはあなたのデザイン、利用可能なスペース、またはあなたの好みに依存します。

ダウンロード | デモ | ウェブホスティング

3。 お問い合わせフォーム7ツールチップ

Cette WordPress プラグイン Contact Form 7 プラグインの は、Contact Form 7 プラグインに簡単なツールチップ機能をもたらします. ツールチップは、ターゲット要素にカーソルを合わせると表示されます. モバイル デバイスでは、ツールチップはターゲット要素がいつエンゲージされているかを示します。

お問い合わせフォーム7ツールチップ

その主な機能は次のとおりです。使いやすさ、Contact Form 7のすべてのバージョンのサポート、ツールチップの背景色のカスタマイズ、HTMLコードのサポート、完全なレイアウト応答性など。

ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

まとめ

そこ! このチュートリアルは以上です。YoutubeまたはVimeoのビデオを表示するのに役立つことを願っています。 WordPress Webサイトのライトボックス. お気軽に お気に入りのソーシャルネットワークで友達と共有する

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

しかし、それまでの間、あなたについて教えてください commentaires 専用セクションの提案。

...