Criei uma página com três div
s que direcionam para vídeos de acordo com o seu título, ao clicar em cada um delas, um modal é aberto com o respectivo vídeo da div
.
Este é o HTML:
<body>
<section class="cards">
<div class="card" id='LyBYdYnaX0c'>
<p class="title">Game</p>
</div>
<div class="card" id='5qap5aO4i9A'>
<p class="title">Lofi</p>
</div>
<div class="card" id='_hJZEq61KeM'>
<p class="title">Camus</p>
</div>
</section>
<div class="modalOverlay">
<div class="modalOverlayContent">
<div class="modalIframe">
<iframe src='' frameborder="0"></iframe>
</div>
<div class="modalOverlayClose">
<a>
<i class="material-icons">close</i>
</a>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
Os links são dinâmicos, como os vídeos são embutidos do Youtube, eu coloquei o id do vídeo como o Id de cada card, assim o controle dos links é feito diretamente pelo JavaScript.
const cards = document.querySelectorAll('.card')
const modalOverlay = document.querySelector('.modalOverlay')
for(let card of cards){
const videoId = card.getAttribute('id')
card.addEventListener('click', function(){
modalOverlay.classList.add('active')
modalOverlay.querySelector('iframe').src = `https://www.youtube.com/embed/${videoId}`
})
}
modalOverlay.querySelector('.modalOverlayClose').addEventListener('click', function(){
modalOverlay.classList.remove('active')
modalOverlay.querySelector('iframe').src = ""
})
A estrutura for
que foi utilizada no JavaSscript fica rodando o tempo inteiro no navegador? Ou ela só é executada quando é chamada? Caso sim, o addEventListener
seria quem "chama" a estrutura for
? Mesmo estando dentro da mesma?
Segue print da página para que fique mais claro: