WordPress:ビデオフェイスボックスポップアップを作成する方法

VimeoとYoutubeのビデオは、Webサイトやブログでかなりのスペースを占める可能性のある高解像度のビデオを提供するようになりました。 これを最適化するXNUMXつの方法は、Faceboxと呼ばれる方法を利用することです。 フェイスボックスは、個別のポップアップウィンドウなしでページ内にウィンドウを表示するための優れた手段です。

lifeline-video-button.png

ライフラインデータセンター テーマを移動したり再設計したりすることなく、ホームページに表示したい、Another CoolDesignによって作成されたビデオがありました。 つまり、大きな再生ボタンが付いた素敵な小さな画像を作成し、その中にビデオを表示するためのスタイリッシュなウィンドウを生成するコードを組み込みました。

lifeline-video-facebox.png

実装は簡単でした WordPressフェイスボックスギャラリープラグイン from トルイマージュ。 私は作成しました 外部ページ (video.html)ビデオがあるサイトのルートに(autoplay = 1で、開いたときに自動再生されるように)、必要なスニペットを含むテキストウィジェットを追加しました。

<a href="video.html" rel = "facebox" onclick = "javascript:pageTracker._trackPageview( '/ special / mypage');"> 

世界 rel = facebox 指定は、リンクがクリックされたときにコードを開始するものです。 すぐに再生を開始するビデオフェイスボックスがポップアップします。 これは、XNUMXつ以上のビデオをページに埋め込むための単純な実装と簡単なソリューションです。 間もなく別のサイトでこの方法を利用する予定です。

注:クライアント内の動画で視聴回数をキャプチャすることが重要です 分析論 (Google Analytics)、アンカータグにonclickイベントも追加しました。 これで、ユーザーがビデオをクリックすると、「仮想」ページビューが表示されます。 上記のコードを追加しました。

3のコメント

  1. 1

    チュートリアルを書いてくれてありがとう。 うまくいけば、フェイスボックスポップアップにインラインコンテンツを実装するためのいくつかのことが明らかになるでしょう。 🙂

  2. 2

    ウィンドウを閉じるとIEでビデオがバックグラウンドで再生され続けることに気づきましたか? (自分で問題に遭遇し、修正を見つけようとしています!)

どう思いますか?

このサイトはAkismetを使用して迷惑メールを減らします。 コメントの処理方法を学ぶ.