KU Sticky Video for YouTube

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

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

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

リソース

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

機能

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

Free 版 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 ダッシュボードから自動更新。

特定の YouTube 動画が追従表示されないようにするにはどうすればよいですか ?

WordPress エディターの「高度な設定」 ->「追加 CSS クラス」で、除外対象の CSS クラス (設定ページで設定可能、デフォルト: no-sticky) を YouTube ブロックまたはその親コンテナに追加できます。

このプラグインによってウェブサイトの表示速度が低下することはありますか ?

いいえ、パフォーマンスに配慮して設計されています。プラグインは非常に軽量 (圧縮されたバニラ JS を使用、jQuery 不使用) で、条件付き読み込みを採用しています。これにより、スクリプトやスタイルは実際に YouTube 動画の埋め込みが含まれるページや投稿でのみ読み込まれます。その他のページには一切影響を与えません。

追従プレイヤーがヘッダーメニューやチャットウィジェットと重なってしまう場合はどうすればよいですか ?

プラグインのオプション設定 (設定 -> KU Sticky Video for YouTube) で Z-index の設定を調整できます。Z-index の値を大きくするとプレイヤーが手前に表示され、小さくすると固定メニューの背後に配置できます。また、表示位置を「右下」と「左下」の間で切り替えることも可能です。

モバイル端末で追従効果を無効にすることはできますか ?

はい。幅の狭いビューポート (モバイル端末) で自動的に追従プレイヤーを無効化する設定があります。これにより、表示スペースが限られた小さな画面でも、すっきりと使いやすいユーザー体験を維持できます。

WordPress 標準の Gutenberg (ブロック) エディターに対応していますか ?

はい、インストールするだけで WordPress 標準の YouTube 埋め込みブロックで動作します。また、クラシックエディターでの埋め込みや、投稿コンテンツ内の生の iframe コードにも対応しています。

より多くの機能を備えた Pro 版はありますか ?

はい ! KU Sticky Video for YouTube Pro は、高度なターゲティング、デザインの完全カスタマイズ、除外ゾーン、ページ単位のフィルターフックなど、多彩な機能で通常版を拡張します。 👉 Pro 版の詳細と価格を見る | ライブデモを試す

ビルド手順 (開発者向け)

圧縮されたアセットを再ビルドするには、プラグインディレクトリで次のコマンドを実行します: 1. npm install (ビルド用の依存関係をインストール) 2. npm run build (@wordpress/scripts を使用してソースファイルをコンパイル)

1.8.8

• 改善: DOM 内の既存の YouTube API スクリプトを確認することで、重複したスクリプトタグの読み込みを防止しました。
• 修正: 公式 API 仕様に基づき、YT.get() の第一引数として要素の ID 文字列を使用し、フォールバックとして DOM 要素を使用するようにしました。

1.8.7.1

• 更新: ドキュメントを更新し、セットアップガイドへのリソースリンクを追加して、チェンジログを最適化しました。

1.8.7

• 改善: トリガー設定の説明文を2行に分割し、通常版制限についての注釈をツールチップ形式で表示するよう変更しました。可読性と翻訳単位の粒度が向上しています。
• 追加: 設定ページ末尾に Pro 版の案内カード (販売ページへのリンク付き) を追加しました。

1.8.5

• 修正: 一時停止して閉じた追従動画が、元の表示位置に戻った後にさらにスクロールすると、意図せず再出現してしまう問題を解決しました。

1.8.4

• 修正: 一時停止中の追従動画が、モバイル端末でのスクロールや画面の向きの変更によって、完全に非表示になってしまう問題（アドレスバーの開閉に伴う高さ変化のみのリサイズイベントなどに起因）を解決しました。

1.8.3

• 追加: プラグイン一覧ページに設定リンクを追加しました。

1.8.2

• 修正: 追従状態を解除した後に、追従時のボーダーや box-sizing のスタイルが元の動画プレイヤーに残ってしまう問題を解決しました。

1.8.0

• 改善：スクロールの追従判定を IntersectionObserver API に移行し、レイアウトのリフロー (getBoundingClientRect の呼び出し) を排除することで、よりスムーズなスクロールを実現しました。
• 改善：PHP 側でアセットの条件付き読み込みを実装し、YouTube 動画の埋め込みが含まれない個別ページにおいて JS および CSS の読み込みをスキップするようにしました。

1.7.0

• 追加: 追従プレイヤーの幅の単位として、パーセンテージ (%) およびピクセル (px) に対応しました。
• 追加: パーセンテージ基準のサイズ指定において、元の動画の幅やカスタムピクセル制限を超えないようにするための最大幅制限を追加しました。
• 追加: 固定ヘッダーメニューやチャットウィジェットとの重なりを解消するため、Z-index を設定できるオプションを追加しました。
• 追加: 元の動画の位置より上にスクロールした際、追従プレイヤーを非表示にするオプションを追加しました。
• 改善: 追従プレイヤーの高さを表示領域の50%までに自動制限しました。
• 修正: 追従動画の一時停止中に別の動画を再生した際、追従プレイヤーが閉じられない問題を解決しました。
• 修正: YouTube API の iframe 読み込みおよび初期化タイミングを調整しました。

1.6.1

• 改善: 設定ページの分かりやすさを向上させるため、日本語の翻訳テキストをブラッシュアップしました。

1.6.0

• 追加: 表示位置 (右下または左下) を選択するオプション。
• 追加: 幅の狭い (モバイル) ビューポートで追従動画を自動的に無効にするオプション。
• 改善: 将来の拡張に対応するため、内部フックとアーキテクチャを強化しました。

1.5.0

• 名称変更: プラグイン名を「Sticky YouTube」から「KU Sticky Video for YouTube」に変更。

1.4.3

• 修正: 互換性ヘッダーと PHP バージョンの互換性を調整しました。
• 修正: 設定ページのセキュリティを強化。
• 追加: WordPress.org への申請用ライセンス表記を追加。

1.0.0

• 初期リリース。