נגן וידאו צף להטמעת iframe של יוטיוב (בזמן שהסרטון מופעל)

[צדיק תמים]

שלום.
אני משתמש בiframe כדי להטמיע סרטוני יוטיוב.
רציתי להוסיף נגן צף - כמו באתר "המחדש" ו"JDN" לדוגמה - שאם מפעילים סרטון וגוללים את הדף למטה, הסרטון "צף" ו"נדבק" לפינה של המסך:

אני מעוניין בכזה דבר, אבל עבור ההטמעת iframe של הסרטוני יוטיוב.
מצאתי את ה-CodePen הזה: https://codepen.io/sunny-sehgal/pen/KQBoWZ שמבצע את זה בצורה מאוד יפה, אלא שהוא "מציף" את הסרטון בלי קשר להאם הוא הופעל או לא - אלא רק על סמך הגלילה של הדף, וממילא אם יש בדף יותר מסרטון יוטיוב אחד - הם עולים אחד על השני וזה משתבש.
מצאתי גם את זה: https://codepen.io/sunny-sehgal/pen/vdaWvX, שזה בעצם מה שאני צריך - אבל זה מתאים לסרטון וידאו רגיל, ולא להטמעת סרטוני יוטיוב באמצעות iframe...
ניסיתי לחפש חומר על זה, והבנתי שצריך להיעזר בAPI הייעודי כדי לקלוט את אירוע ההפעלה של הוידאו (וכן את אירוע הסיום, לכאורה), אלא שלא הבנתי כלל איך משתמשים עם הAPI שלהם.
אשמח לעזרה...
תודה

[יוסף בן שמעון]

@צדיק-תמים אמר בנגן וידאו צף להטמעת iframe של יוטיוב (בזמן שהסרטון מופעל):

והבנתי שצריך להיעזר בAPI הייעודי כדי לקלוט את אירוע ההפעלה של הוידאו (וכן את אירוע הסיום, לכאורה),

עד כאן צעדת בשביל הנכון, צריך לטעון את הסקריפט של הפלאגין שלהם, לאתחל מופע חדש של הפלאגין, ולשלוט על הוידאו כמו בתיעוד. איפה נתקעת?

[צדיק תמים]

@יוסף-בן-שמעון קודם כל - מה שכתבת

@יוסף-בן-שמעון אמר בנגן וידאו צף להטמעת iframe של יוטיוב (בזמן שהסרטון מופעל):

צריך לטעון את הסקריפט של הפלאגין שלהם, לאתחל מופע חדש של הפלאגין

לא היה ברור לי קודם...
כלומר הבנתי שהדרך לפתרון עוברת דרך התיעוד
אבל לא הצלחתי להבין איך מסתדרים איתו...
מה זה אומר לטעון את הסקריפט של הפלאגין שלהם?
בתיעוד שלהם מופיע רק דוגמה לאיך לעשות "נגן מוטבע שיטען סרטון, ישמיע אותו במשך שש שניות ולאחר מכן יפסיק את ההשמעה", ולא איך ספציפית טוענים את הסקריפט.

לאתחל מופע חדש של הפלאגין

דהיינו?
איך עושים את זה?

@יוסף-בן-שמעון אמר בנגן וידאו צף להטמעת iframe של יוטיוב (בזמן שהסרטון מופעל):

ולשלוט על הוידאו כמו בתיעוד

אני צריך בדיוק הפוך...
אני לא מעוניין למשל ליצור כפתור מחוץ לוידאו שדרכו ניתן להפעיל אותו - אלא להיפך, שכאשר המשתמש מפעיל את הוידאו, רק אז הנגן וידאו יצוף בגלילה.
כלומר ללכוד את האירוע של הפעלת הוידאו על ידי המשתמש (ושל סיום שלו).

[צדיק תמים]

נראה שהמדריך הזה עונה על הרבה מאוד אם לא על כל השאלות
https://webdesign.tutsplus.com/tutorials/how-to-create-a-sticky-floating-video-on-page-scroll--cms-28342
אני ינסה לחקור אותו, מקווה שאצליח...

[צדיק תמים]

הצלחתי לבצע את זה, אלא שזה עובד רק על הסרטון הראשון שבדף - כלומר שאם יש בדף 4 סרטונים אחד אחרי השני, רק בסרטון הראשון יהיה נגן צף, וב3 האחרים לא.
כנראה צריך לגרום למחזוריות של חלק מסוים בקוד (באמצעות טיימר זמן/בדיקת כמות האלמנטי iframe שבדף ואז לולאת for, וכדו'), אבל אני לא יודע איזה חלק...
זה הקוד JS:

jQuery(function ($) {
  var $window = $(window); // 1. Window Object.
  var $featuredMedia = $("#featured-media"); // 1. The Video Container.
  var $featuredVideo = $("#featured-video"); // 2. The Youtube Video.

  var player; // 3. Youtube player object.
  var top = $featuredMedia.offset().top; // 4. The video position from the top of the document;
  var offset = Math.floor(top + $featuredMedia.outerHeight() / 2); //5. offset.
  // API של יוטיוב
  window.onYouTubeIframeAPIReady = function () {
    player = new YT.Player("featured-video", {
      playerVars: {
        fs: 1,
        controls: 1,
      },
      events: {
        onStateChange: onPlayerStateChange,
      },
    });
  };
  // שינויים כאשר מצב הסרטון משתנה
  /**
   * Run when the Youtube video state (play, pause, etc.) is changed.
   *
   * @param {Object} event The Youtube Object Event.
   * @return {Void}
   */
  function onPlayerStateChange(event) {
    var isPlay = 1 === event.data;
    var isPause = 2 === event.data;
    var isEnd = 0 === event.data;

    if (isPlay) {
      $featuredVideo.removeClass("is-paused");
      $featuredVideo.toggleClass("is-playing");
    }

    if (isPause) {
      $featuredVideo.removeClass("is-playing");
      $featuredVideo.toggleClass("is-paused");
    }

    if (isEnd) {
      $featuredVideo.removeClass("is-playing", "is-paused");
    }
  }
  //  מה שגורם לסרטון לצוף
  $window
    .on("resize", function () {
      top = $featuredMedia.offset().top;
      offset = Math.floor(top + $featuredMedia.outerHeight() / 2);
    })

    .on("scroll", function () {
      $featuredVideo.toggleClass(
        "is-sticky",
        $window.scrollTop() > offset && $featuredVideo.hasClass("is-playing")
      );
    });
});

@יוסף-בן-שמעון מקווה שזה בסדר לתייג אותך...

[יוסף בן שמעון]

@צדיק-תמים אמר בנגן וידאו צף להטמעת iframe של יוטיוב (בזמן שהסרטון מופעל):

@יוסף-בן-שמעון מקווה שזה בסדר לתייג אותך...

לא ברור לי המבנה של ההטמל, נסה אולי להחליף את שורה 50 ל

      top = $("#featured-media").offset().top;

או אולי את שורה 55 ל

      $("#featured-video").toggleClass(

או שניהם כאחת

[צדיק תמים]

@יוסף-בן-שמעון ניסיתי את שני השינויים שהבאת, שניהם יחד וכל אחד לחוד, ולא עבד.
המבנה של ההטמ"ל (שעליו בדקתי) הוא כזה:

  <figure class="content-media content-media--video" id="featured-media"></figure>
  <div class='embed-wrapper'><div class='embed-container'><iframe class="content-media__object" id="featured-video" src='
?enablejsapi=1&rel=0&showinfo=0&controls=0' frameborder='0'></iframe></div></div>
  </figure>

כפול 4 פעמים (אחד אחרי השני), ואז סתם כ-20 תגי ירידת שורה (<br />) וכמה אותיות, כדי שאוכל לגלול למטה.
(כמובן כל הנ"ל בצירוף הCSS שהובא במדריך)

[יוסף בן שמעון]

@צדיק-תמים נסה ליצור דוגמא מינימלית כאן
https://jsfiddle.net/