HTML
<main>
<div class="container">
<div class="video">
<img src="../../assets/img/laptop.webp" alt="laptop">
<iframe id="video" width="560" height="315"
src="https://www.youtube.com/embed/ntBVs2n8IC0"
frameborder="0" allowfullscreen></iframe>
</div>
<div class="controls">
<button onclick="changeVideo('ntBVs2n8IC0')">Video 1</button>
<button onclick="changeVideo('BW0ESWwMC_o')">Video 2</button>
<button onclick="changeVideo('KxdlczdR2no')">Video 3</button>
<button onclick="changeVideo('BgkdDTSV568')">Video 4</button>
<button onclick="changeVideo('gxLr6M9uuEY')">Video 5</button>
</div>
<div class="info">
<h1>Ruta de estudio frontend</h1>
<p>En nuestra ruta de estudio estamos aprendiendo todo lo necesario
para convertirnos en desarrolladores frontend. Para ello estamos haciendo
cursos y leyendo documentación en internet, todo de manera gratuita.</p>
<p>Todo nuestro progreso queda registrado en formato de video
y este a su vez es subido a mi canal personal para que cualquiera lo
pueda consultar si lo necesita.</p>
</div>
</div>
</main>
<script src="./script.js"></script>
CSS
.container {
display: flex;
flex-direction: column;
max-width: 1024px;
margin: 2% auto;
gap: 2rem;
align-items: center;
}
.video {
display: flex;
justify-content: center;
position: relative;
}
.video img{
position: relative;
width:100%;
height:auto;
}
.video iframe{
position:absolute;
top: 13%;
width: 74%;
height:auto;
aspect-ratio:14/9;
}
.info {
width: 100%;
display: flex;
flex-direction: column;
gap: 20px;
}
.controls {
margin-top: 20px;
}
.controls button {
padding: 10px 20px;
margin-right: 10px;
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
font-size: 1.2rem;
}
.controls button:hover {
background-color: #0056b3;
font-size: 1.2rem;
}
JS
function changeVideo(videoId) {
var iframe = document.getElementById('video');
iframe.src = "https://www.youtube.com/embed/" + videoId;
}
