I am inserting a YouTube video, the objective is that the recommended videos will not be seen when pausing or ending the video, I know that this is no longer possible from YouTube, which makes a modification with CSS, and JS, place an image on top of the video when pausing or ending. The objective was fulfilled.
But I was noticing that if the code is inspected with the tool that the browser brings, it is possible that the file containing the CSS and JSS code will be modified from there, and when removing said code that I established, the video is shown without the modification that I did.
I have no idea how to solve this or what I can do, any suggestions I would greatly appreciate.
This is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="shortcut icon" href="imgs/icon/favicon.ico">
<style>
.hytPlayerWrap {
display: inline-block;
position: relative;
}
.ytp-copylink-title{
display: none;
}
.hytPlayerWrap.ended::after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: 64px 64px;
background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);
}
.hytPlayerWrap.paused::after {
content: "";
position: absolute;
left: 0;
right: 0;
width: 640px;
height: 340px;
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: 40px 40px;
background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
}
.hytPlayerWrap.ended iframe,
.hytPlayerWrap.paused iframe{
visibility: hidden;
background-repeat: no-repeat;
}
.hytPlayerWrap {
background-position: center;
background-repeat: no-repeat;
}
</style>
<title> 2021</title>
</head>
<body id="plenario">
<div class="container-fluid">
<div class="row">
<div class="col-12">
<br><br><br><br>
<div class="row">
<div class="col-2"> </div>
<div class="col-8 text-center">
<div class="hytPlayerWrapOuter" >
<div class="hytPlayerWrap" style="background-image:url(imgs/Captura.jpg)">
<iframe width="640" height="360" src="https://www.youtube-nocookie.com/embed/wzWmZYi4qMg?rel=0&controls=0&enablejsapi=1" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
</div>
</div>
</div>
<div class="col-2"> </div>
</div>
</div>
<div class="seccion-regresar-plenario">
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/utiles.js"></script>
<script>
"use strict";
document.addEventListener('DOMContentLoaded', function () {
if (window.hideYTActivated) return;
let onYouTubeIframeAPIReadyCallbacks = [];
for (let playerWrap of document.querySelectorAll(".hytPlayerWrap")) {
let playerFrame = playerWrap.querySelector("iframe");
let tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
let firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
let onPlayerStateChange = function (event) {
if (event.data == YT.PlayerState.ENDED) {
playerWrap.classList.add("ended");
} else if (event.data == YT.PlayerState.PAUSED) {
playerWrap.classList.add("paused");
} else if (event.data == YT.PlayerState.PLAYING) {
playerWrap.classList.remove("ended");
playerWrap.classList.remove("paused");
}
};
let player;
onYouTubeIframeAPIReadyCallbacks.push(function () {
player = new YT.Player(playerFrame, {events: {'onStateChange': onPlayerStateChange}});
});
playerWrap.addEventListener("click", function () {
let playerState = player.getPlayerState();
if (playerState == YT.PlayerState.ENDED) {
player.seekTo(0);
} else if (playerState == YT.PlayerState.PAUSED) {
player.playVideo();
}
});
}
window.onYouTubeIframeAPIReady = function () {
for (let callback of onYouTubeIframeAPIReadyCallbacks) {
callback();
}
};
window.hideYTActivated = true;
});
</script>
</body>
</html>
