Soluciones Inába

Creando un Reproductor de YouTube Personalizado en HTLM

En la era digital, la integración de contenido multimedia en sitios web es esencial para proporcionar una experiencia envolvente a los usuarios. Uno de los servicios de alojamiento de videos más populares es YouTube, pero a veces, queremos personalizar la presentación de los videos para adaptarlos al diseño de nuestro sitio y ofrecer una experiencia más única.

En este artículo, exploraremos cómo crear un reproductor de YouTube personalizado que se abre en una ventana modal al hacer clic en un enlace, y lo más interesante, sin mostrar el logo de YouTube.

Pasos para Crear el Reproductor de YouTube Personalizado:

1. Estructura HTML:

Comencemos por establecer la estructura básica de nuestro documento HTML. Creamos un enlace que servirá como activador del reproductor y una ventana modal que contendrá el video.

<!DOCTYPE html>
<html lang="es">
<head>
<!-- Encabezado del documento -->
</head>
<body>
<!-- Contenido principal -->
</body>
</html>

2. Estilo con CSS:

Añadimos estilos CSS para dar formato al enlace y a la ventana modal. Además, aseguramos que la ventana modal esté inicialmente oculta.

<style>
body {
font-family: Arial, sans-serif;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}

.modal iframe {
width: 80%;
height: 80%;
}

#openModal {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>

3. Script con JavaScript:

Agregamos un script para manejar la apertura y cierre de la ventana modal al hacer clic en el enlace.

<script>
document.getElementById('openModal').addEventListener('click', function () {
document.getElementById('myModal').style.display = 'flex';
});

function cerrarModal() {
document.getElementById('myModal').style.display = 'none';
}
</script>

4. Contenido HTML Adicional:

Insertamos el enlace que abrirá la ventana modal y la ventana modal en sí. Reemplazamos ‘VIDEO_ID’ con el ID real de nuestro video de YouTube.

<p>Haz clic para ver el video: <span id="openModal">Abrir video</span></p>

<div class="modal" id="myModal">
<span onclick="cerrarModal()" style="color: white; cursor: pointer; position: fixed; top: 15px; right: 25px; font-size: 30px;">&times;</span>
<!-- Reemplaza 'VIDEO_ID' con el ID real de tu video de YouTube -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>

Escribir todo el código anterior en un solo código HTML.

Aquí está el código HTML completo que incluye todo lo que proporcionamos anteriormente en un solo bloque:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Reproductor de YouTube</title>
<style>
body {
font-family: Arial, sans-serif;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
justify-content: center;
align-items: center;
}

.modal iframe {
width: 80%;
height: 80%;
}

#openModal {
cursor: pointer;
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>

<p>Haz clic para ver el video: <span id="openModal">Abrir video</span></p>

<div class="modal" id="myModal">
<span onclick="cerrarModal()" style="color: white; cursor: pointer; position: fixed; top: 15px; right: 25px; font-size: 30px;">&times;</span>
<!-- Reemplaza 'VIDEO_ID' con el ID real de tu video de YouTube -->
<iframe src="https://www.youtube.com/embed/VIDEO_ID?rel=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>

<script>
document.getElementById('openModal').addEventListener('click', function () {
document.getElementById('myModal').style.display = 'flex';
});

function cerrarModal() {
document.getElementById('myModal').style.display = 'none';
}
</script>

</body>
</html>

Conclusiones.

Este sencillo tutorial demuestra cómo integrar un reproductor de YouTube personalizado en tu sitio web, proporcionando a los usuarios una experiencia más atractiva. La ventana modal ofrece un espacio dedicado para ver el video, y la omisión del logo de YouTube ayuda a mantener la coherencia con el diseño general de tu página.

Personalizar la presentación de contenido multimedia no solo mejora la estética de tu sitio, sino que también puede contribuir a una experiencia de usuario más inmersiva y coherente. ¡Inténtalo y lleva tu integración de videos al siguiente nivel!

 

Temas relacionados :

Categoría General, Desarrollo Web, Tips Inába

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

[ 2025 ]

¡Próximamente!

Estamos emocionados de anunciar que el servicio de Imprenta y Sublimación estará disponible muy pronto.

En Soluciones Inába, estamos listos para ofrecer materiales promocionales personalizados y de alta calidad. ¡Esté atento a nuestras novedades!

Estamos emocionados de anunciar que el servicio de Imprenta y Sublimación estará disponible muy pronto.

¡Esté atento a nuestras novedades!

Abrir chat
¿Necesitas ayuda?
Hola 👋
¿En qué podemos ayudarte?