estoy insertando un video de youtube mediante iframe pero necesito ocultar elementos como "compartir" y "ver mas tarde"
.html5-video-player:not(.ytp-big-mode) .ytp-chrome-top .ytp-share-button {
display: none!important;
}
No es posible ocultar los elementos gráficos que ves en un video de Youtube ya que la API no lo permite, puedes optar por usar librería como VideoJS y poder manipular algunas cosas escenciales del comportamiento de un video, también puedes hacer uso de una extensión llamada Youtube extension que puedes instalarle a la misma librería con esto podrás tener cierto control en cuanto al comportamiento pero lamentablemente no podrás desactivar esos gráficos. Te dejo las ligas de las librerías así como también un ejemplo.
Incluí un botón para poder activar ó desactivar el sonido del video, ya que por defecto, cuando el video se autoreproduce al cargarse la página este tiene que tener el sonido desactivado, esto viene desde tu navegador pero lo puedes manipular.
VideoJS: https://github.com/videojs/video.js Youtube extension: https://github.com/videojs/videojs-youtube
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<title>VideoJS</title>
</head>
<body>
<video
id="vid1"
class="video-js"
>
</video>
<button class="mute-btn"> Mute </button>
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Youtube.min.js"></script>
<script>
var player = videojs('vid1', {
"techOrder": ["youtube"],
"sources": [
{
"type": "video/youtube",
"src": "https://www.youtube.com/watch?v=tB9zAyVoVQI"
}
],
"controls": true,
"fluid": true,
"autoplay": true
}).player();
player.ready(function() {
setTimeout(function() {
player.autoplay('muted');
}, 2000);
});
const muteButton = document.querySelector('.mute-btn');
muteButton.addEventListener('click', function() {
var video = videojs("vid1").player();
var muted = video.muted();
if (muted == true) {
video.muted(false);
} else {
video.muted(true);
}
});
</script>
</body>
</html>
Respuesta corta: No puedes modificar un Iframe
Pero si puedes hacer eso con el API de youtube, puedes revisar la documentación : https://developers.google.com/youtube/iframe_api_reference