KU Sticky Video for YouTube

説明

KU Sticky Video for YouTube を使用して、シームレスで魅力的な視聴体験を提供しましょう。この軽量プラグインは、埋め込まれた YouTube 動画を自動的にフローティング動画 (ピクチャーインピクチャースタイルの追従動画) に変換し、読者がコンテンツを読み進めるのに合わせて追従表示します。

ユーザーが再生中の動画を通り過ぎてスクロールすると、プレイヤーがスムーズにページの隅へとスライドし、そのまま視聴を続けられます。これにより視聴が途切れるのを防ぎ、ユーザーが記事を読み進めている間もコンテンツへのエンゲージメントを維持できます。

YouTube スクロール追従機能を実装したい場合でも、シンプルなフローティング動画ウィジェットを導入したい場合でも、このプラグインは特別な設定なしで高いパフォーマンスを発揮します。

機能

• 画面外にスクロールされた際に YouTube 動画プレイヤーを自動的に追従表示。
• 表示位置の選択: 右下または左下。
• ピクセル (px) またはパーセンテージ (%) の単位を使用して、動画の幅をカスタマイズ。
• パーセンテージ基準のサイズ指定における最大幅の制限 (元の動画の幅に収めるか、カスタムピクセル値を設定)。
• テーマのヘッダーメニュー、ウィジェット、ポップアップとの重なりを防ぐために Z-index を調整可能。
• 画面を塞がないよう、追従動画の高さを表示領域の50%までに自動で制限。
• 幅の狭いビューポートでは自動的に追従動画プレイヤーを無効化し、モバイルのユーザー体験を保護します。
• カスタマイズ可能な除外 CSS クラスを使用して、特定の動画の追従表示を防ぎます。
• 美しくクリーンな管理設定ページ。

リソース

• 📖 インタラクティブデモ & ガイド: ブログ記事上で実際に動画の追従効果を体験し、プラグイン開発の背景にあるストーリーを読み、設定手順のスクリーンショットを確認するには、KU Sticky Video for YouTube の紹介 & ライブデモ をご覧ください。
• 💻 オープンソース: このプラグインにはパフォーマンス向上のために圧縮された JavaScript が含まれています。圧縮されていない完全なソースコードは GitHub で公開されています。

併用動作確認済みプラグイン

以下のプラグインは、本プラグインと併用して正常に動作することを確認しています:

• Embed Optimizer
• Lazy Load for Videos
• EmbedPlus for YouTube: functions.php などで JS フックの設定が必要 (詳細は下記の「EmbedPlus for YouTube 互換性」セクションを参照)

EmbedPlus for YouTube 互換性

EmbedPlus for YouTube プラグインは、カスタム初期化ラッパーや動的な遅延読み込みといった独自のアーキテクチャを採用しています。これらのカスタマイズの影響により、標準のプレイヤー追従スクリプトでは再生状態の変更イベントを自動的にキャッチできません。

EmbedPlus 経由で埋め込まれた動画で追従効果を有効にするには、以下の PHP コードスニペットをお使いのテーマ (子テーマを推奨) の functions.php ファイルに追加してください:

add_action( 'wp_enqueue_scripts', function() {
    wp_add_inline_script(
        'ku-sticky-video-for-youtube',
        "
        if ( window.wp && window.wp.hooks ) {
            window.wp.hooks.addFilter(
                'ku_sticky_video_for_youtube_get_existing_player',
                'ku-sticky-video-compat-embedplus',
                function( player, iframe ) {
                    if ( ! player && window._EPYT_ && window._EPYT_.apiVideos && iframe.id ) {
                        return window._EPYT_.apiVideos[ iframe.id ] || null;
                    }
                    return player;
                }
            );
        }

        if ( window._EPADashboard_ && ! window._EPADashboard_.__ku_sticky_hooked ) {
            window._EPADashboard_.__ku_sticky_hooked = true;
            const originalOnStateChange = window._EPADashboard_.onPlayerStateChange;
            window._EPADashboard_.onPlayerStateChange = function( event ) {
                if ( typeof originalOnStateChange === 'function' ) {
                    originalOnStateChange.apply( this, arguments );
                }
                if ( window.kuStickyVideoForYouTube && event.target ) {
                    let iframe = null;
                    try {
                        iframe = event.target.getIframe();
                    } catch(e) {}
                    if ( ! iframe && event.target.f ) {
                        iframe = event.target.f;
                    }
                    if ( iframe ) {
                        window.kuStickyVideoForYouTube.handleStateChange( event, iframe );
                    }
                }
            };
        }
        ",
        'before'
    );
}, 20 );

通常版 vs Pro 版 機能比較

さらに高度な設定をお求めですか ? KU Sticky Video for YouTube Pro は、パワーユーザーやプロフェッショナルサイト向けに多彩な高度オプションを追加します。
👉 Pro 版の詳細と価格を見る | ライブデモを試す

• ターゲット動画の選択方法: [通常版] 除外モードのみ — CSS クラスを追加して特定の動画を対象外にします。/ [Pro] 包含モードも利用可能 — CSS クラスを追加して特定の動画だけを追従対象にできます。
• 複数動画への対応: [通常版] 対象となる最初の動画のみ追従表示されます。/ [Pro] 再生中の動画に追従対象が自動的に切り替わります。
• 追従表示の位置: [通常版] 右下・左下のみ。/ [Pro] 4 隅すべて (右上・左上が追加)。
• 画面の余白: [通常版] 画面端から 20px 固定。/ [Pro] 水平・垂直方向のオフセットをそれぞれピクセル単位で個別に調整可能。
• プレイヤーの最大高さ: [通常版] 表示領域の高さの 50% 固定。/ [Pro] 表示領域の高さの 10% 〜 100% の範囲で調整可能。
• 除外ゾーン: [通常版] 非対応。/ [Pro] ビューポートの上端または下端から指定のピクセル範囲内で追従表示を抑制 — 固定ヘッダーや広告、クッキーバナーなどとの重なり防止に有効。
• モバイル対応: [通常版] プレイヤーを表示できないほどビューポートが狭い場合は自動無効化。/ [Pro] 特定のデバイスサイズで追従を無効にするカスタムブレークポイントの設定にも対応。
• 再生終了後も追従を維持: [通常版] 非対応。/ [Pro] 再生終了後も追従表示を維持するオプション — チュートリアルやコース動画に最適。
• プレイヤーのスタイル: [通常版] デザイン固定 (border-radius: 8px、デフォルトのシャドウ、ボーダーなし)。/ [Pro] border-radius・シャドウの透明度・ボーダーの太さ・色を自由にカスタマイズ可能。
• 閉じるボタン: [通常版] 標準デザイン、右上固定。/ [Pro] 色と配置 (4 隅から選択) をカスタマイズ可能。動画の一時停止中のみ表示するオプションあり。
• ライブプレビュー: [通常版] 非対応。/ [Pro] 設定パネル内でリアルタイムプレビューを表示。ワンクリックでデフォルトにリセット可能。
• フィルターフック: [通常版] 非対応。/ [Pro] functions.php のフィルターフックを使ってページごとに設定を上書き可能。
• アップデート: [通常版] WordPress.org 経由で自動更新。/ [Pro] 設定でライセンスを有効化後、WordPress ダッシュボードから自動更新。