Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Foros del Web - Ejemplo</title>
</head>
<body>
    <ul id="lista">
        <li>
            <span class="enlace">Catfish and the Bottlemen</span>
            <div class="modal">
                <iframe data-src="https://www.youtube.com/embed/fBIE_-fygMc"></iframe>
            </div>
        </li>
        <li>
            <span class="enlace">Circa Waves</span>
            <div class="modal">
                <iframe data-src="https://www.youtube.com/embed/rVGKW3K1h8o"></iframe>
            </div>
        </li>
    </ul>
    
    <div id="fondo"></div>
</body>
</html>
 
*{
    transition: all ease .1s;
}
​
#lista li span:hover{
    cursor: pointer;
    text-decoration: underline;
    color: blue;    
}
​
iframe{
    height: 0;
    width: 0;
    opacity: 0;
    z-index: 5;
    position: absolute;
}
​
#fondo{
    position: absolute;
    display: none;
    background-color: black;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;   
    z-index: -5;
}
 
document.addEventListener("DOMContentLoaded", function(){
    document.querySelector("#lista").addEventListener("click", function(event){
        var elementoAfectado = event.target;
        if (elementoAfectado.className == "enlace"){
            var elLi = elementoAfectado.parentNode,
                elDiv = elLi.querySelector(".modal"),
                elIframe = elDiv.querySelector("iframe"),
                elFondo = document.querySelector("#fondo"),
                laRuta = elIframe.dataset.src; 
            
            //Estilos
            elIframe.style.opacity = 1;
            elIframe.style.height = "250px";
            elIframe.style.width = "350px";
            
            setTimeout(function(){
                //Centramos al <iframe>
                elIframe.style.top = window.innerHeight / 2 - elIframe.offsetHeight / 2 + window.scrollY + "px";
                elIframe.style.left = window.innerWidth / 2 - elIframe.offsetWidth / 2 + window.scrollX + "px";
            }, 100);            
            
            elFondo.style.display = "block";
            elFondo.style.opacity = 0.8;
            
            document.body.style.overflow = "hidden";
            
            elIframe.src = laRuta;
        }
    }, false);
}, false);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
Alexis88pro
0viewers