Seeking to prevent recommended videos from appearing when pausing or ending a YouTube video, I resorted to a CSS and JS modification. I successfully placed an image over the video during these events, achieving the desired outcome.
However, upon inspecting the code using the browser's tool, I realized it's possible to modify the files containing the CSS and JS code directly. Removing the established code leads to the video being displayed without my intended modification.
I'm unsure of how to address this issue or what steps to take next. Any suggestions or guidance on resolving this matter would be greatly appreciated.
Below is the code snippet I've been working with:
<!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;
}
/* Modified CSS and JS code goes here */
</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>
/* Modified JS code here */
</script>
</body>
</html>