youtube iframe api remove all elements from the video and prevent pausing when clicked
Is it possible to remove all visible elements on a youtube video and not give the user a pause?
Read the documentation in the end, I sketched this code, but the top bar, the youtube logo, and the pause still work.
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '800',
width: '100%',
videoId: 'P9ylTV2Bg1A',
playerVars: {'muted': 1, 'autoplay': 1, 'disablekb': 1 , 'controls': 0, 'iv_load_policy': 0, 'loop': 1, 'showinfo': 0, 'modestbranding': 1},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange,
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.mute();
event.target.playVideo();
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
</script>
1
1 answers
In general, since the video was half a block high and 100% wide (Black bars), I had to stretch it through scaleX, at the same time, the problem with the interface immediately went away. To disable the pause, set the z-index: -100;
#player{
transform: scaleX(1.35);
position: relative;
z-index: -100;
// &::before{
// content: '';
// position: absolute;
// top: 0;
// bottom: 0;
// left: 0;
// right: 0;
// }
}
1
Author: Александр, 2020-02-14 04:18:56