Buenas, estoy tratando de hacer una página web en la que se muestren unos títulos de vídeo y sus respectivas miniaturas y al dar clic en estas salga un reproductor pequeño en medio de la página que tenga opción a ponerlo en pantalla completa.
Esta sería la interfaz de la página:
El scroll es porque hay más vídeos, pero doy por hecho que con esos dos ejemplos se entiende. Lo que no sé es como hacer que al clickar en cualquier parte del div(divididos por colores) Se abra un reproductor sin salir de la página. El reproductor que me gustaría que apareciera sería el de youtube. Supongo que hay que hacer algo con javascript pero no he encontrado ninguna información que me haya sido útil.
Digo que supongo que hay que hacer algo con javascript que es lo que he mirado y no he encontrado nada útil. He probado con la función toggle() de JQuery pero no consigo que quede como pretendo, ya que con esta solo consigo mostrar y ocultar el reproductor pero no que este aparezca en el medio de la pantalla.
Os dejo el código HTML + JS:
$(document).ready(function(){
$('.carousel').carousel();
var altura = $('.menu').offset().top;
$(window).on('scroll',function(){
if ( $(window).scrollTop() > altura ){
$('.menu').addClass('menu-fixed');
} else {
$('.menu').removeClass('menu-fixed');
}
});
$("#news").mouseover(function(){
$("#news").css("background-color", "#800000");
$("#a").css("color",black);
});
$("#conciertos").mouseover(function(){
$("#conciertos").css("background-color", "#800000");
});
$("#songs").mouseover(function(){
$("#songs").css("background-color", "#800000");
});
$("#lyrics").mouseover(function(){
$("#lyrics").css("background-color", "#800000");
});
$("#store").mouseover(function(){
$("#store").css("background-color", "#800000");
});
$(".listaArriba").mouseleave(function(){
$(".listaArriba").css("background-color","#B22222");
$("#videos").css("background-color", "#800000");
});
$("#videos").css("background-color", "#800000");
$("#video1").toggle();
});
$("#foto1").click(function(){
$("#video1").toggle();
});
Hasta ahí el JS. HTML:
<iframe id="video1" width="560" height="315" src="https://www.youtube.com/embed/xErYAGUgCjQ" frameborder="0" allowfullscreen></iframe>
<header class="headerEnd">
<div class = "cabecera">
<ul id = "lista1">
<a href="home.html" id="fotoEndi"><img src="endikasangroniz.png" id=titulua></a>
<a href="../EndiIngles/endi.html" id = "o"><img src="../Bandera/uk.png"></a>
<a href="../EndiCastellano/endi.html"><img src="../Bandera/banderaEspana.png"></a>
<a href="../EndiEuskera/endi.html"><img src="../Bandera/ikurrina.png"></a>
</ul>
</div>
</header>
<header class = "header">
<div class="menu" id="menu">
<nav class="top-menu">
<ul class = "navigation">
<li class="listaArriba" id="news"><a href="news.html">NEWS</a></li>
<li class="listaArriba" id="conciertos"><a href="gigs.html">GIGS</a></li>
<li class="listaArriba" id="videos"><a href="videos.html">VIDEOS</a></li>
<li class="listaArriba" id="songs"><a href="music.html">MUSIC</a></li>
<li class="listaArriba" id="lyrics"><a href="lyrics.html">LYRICS</a></li>
<li class="listaArriba" id="store"><a href="https://endikasangroniz.bandcamp.com/" target="_blank">STORE</a></li>
</ul>
</nav>
</div>
<div class="videos" style="overflow:scroll;">
<div id="foto1">
<img id="oMSmin" src="../CaratulasAlbum/oneMoreShotmin.jpg"/> <h1 id="texto"><strong>ONE MORE SHOT</strong></h1>
</div>
<div id="foto2">
<h1 id="texto1"><strong>STOLEN KISS</strong></h1> <img id="sK" align="right" src="../CaratulasAlbum/stolenKissmin.jpg"/>
</div>
<div id="foto3">
<img id="oMSmin" src="../CaratulasAlbum/wandermin.jpg"/> <h1 id="texto2"><strong>WANDERING AIMLESSLY</strong></h1>
</div>
<div id="foto2">
<h1 id="texto1"><strong>THE NIGHT HEARS</strong></h1> <img id="sK" align="right" src="../CaratulasAlbum/theNightmin.jpg"/>
</div>
</div>
<div id="footer">
<ul class = "navigationFoot">
<a id="n" href="https://es-es.facebook.com/EndikaSangroniz/" target="_blank"><img src="../IconosRedes/iconoFacebook.png" ></a>
<a id="n" href="https://www.instagram.com/endikasangroniz/?hl=es" target="_blank"><img src="../IconosRedes/iconoInsta.png"></a>
<a id="n" href="https://endikasangroniz.bandcamp.com/" target="_blank"><img id="soundcloud" src="../IconosRedes/bandcamp.png"></a>
</ul>
</div>
No pongo el código CSS ni Javascript porque no tiene nada de relevante con esta duda.