Вставка видео с Rutube с управлением на сайте

Всем привет. Думаю, сейчас некоторую актуальность приобрела работа с видео-хостингом Rutube и люди начали встраивать видео на свои сайты оттуда. Тут мне пришла небольшая задачка добавить на сайт видео с Rutube, с некоторыми пожеланиями. Необходимо было сделать своё изображение-заглушку поверх видео, добавить воспроизведение по нажатию на кнопку play, и сворачивать видео в мини-окошко в углу экрана при прокрутке страницы (без прерывания воспроизведения).

Вставка видео была сделана со следующей разметкой:

<figure class="rutube-video-wrapper style="background-image: url(assets/images/video-overlay.jpg)">
	<div class="rutube-video">
		<div class="rutube-video-item">
			<iframe width="auto" height="auto" src="https://rutube.ru/play/embed/2bc3a7c159051e7629ffa0ab0a7155a6" frameBorder="0" allow="clipboard-write; autoplay" id="rutube-video-content" webkitAllowFullScreen mozallowfullscreen allowFullScreen ></iframe>
			<img src="assets/images/video-overlay.jpg" class="rutube-video-overlay">
			<div class="rutube-video-play-button-wrapper">
				<img src="assets/site/images/play-button.svg" class="rutube-video-play-button">
			</div>
		</div>
	</div>
</figure>

CSS:

.rutube-video-wrapper{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 15px;
    z-index: 3;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
}
.rutube-video {
    width: 100%;
    height: 100%;
}
.rutube-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.rutube-video.sticky {
    position: fixed;
    bottom: 12px;
    left: 12px;
    margin-bottom: 0;
    width: 320px;
    height: 180px;
    padding-bottom: 0;
}
.rutube-video-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    object-fit: cover;
}
.rutube-video-play-button-wrapper {
    width: 20%;
    max-width: 100px;
    height: 20%;
    max-height: 100px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    cursor: pointer;
}

JS:

document.addEventListener("DOMContentLoaded", () => {
    const videoPlayButton = document.querySelector('.rutube-video-play-button'),
	      rutubePlayer = document.getElementById('rutube-video-content'),
	      rutubePlayerOverlay = document.querySelector('.rutube-video-overlay'), 
	      videoPlayButtonWrapper = document.querySelector('.rutube-video-play-button-wrapper');

    videoPlayButton.onclick = function() {
        rutubePlayerOverlay.style.display = 'none'; 
        videoPlayButtonWrapper.style.display = 'none';
        
        rutubePlayer.contentWindow.postMessage(JSON.stringify(
            {
                type: 'player:play',
                data: {}
            }
        ), '*');	
        
        rutubePlayer.contentWindow.postMessage(JSON.stringify(
            {
                type: 'player:unMute'
            }
        ), '*');
        
    };
  
});

Выглядит это всё так: