הצלחתי לבצע את זה, אלא שזה עובד רק על הסרטון הראשון שבדף - כלומר שאם יש בדף 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")
);
});
});
@יוסף-בן-שמעון מקווה שזה בסדר לתייג אותך...
(הרי חרשתי את העמוד הזה הלוך ושוב בדיוק בשביל למצוא דבר כזה...)
