0

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:
introducir la descripción de la imagen aquí

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.

0

2 respuestas 2

2

He conseguido solucionarlo cambiando las funciones toggle() por hide() y show().
Lo que hace este código es ocultar el reproductor nada más abrir la página (usando el hide()) y mostrarlo al clickar el div (usando el show()).

Aquí el código con el problema solucionado:

            $(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").hide();
            $("#foto1").click(function(){
                $("#video1").show();
            });
        });


</head>
<body>
    <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>
    </header>
</body>
0

creo que lo que estás necesitando es una mezcla de JS y CSS, supongo que Stackoverflow no funciona para que otros hagan tu trabajo sino más bien para ayudarte en dudas especificas...

De todos modos te cuento que lo que yo hago, es crear el contenedor flotando en medio estando oculto y le agrego una clase para que aparezca cuando quiero, entonces con jquery utilizando .toggleClass() le agrego o le quito la clase.

Por otra parte para cargar tu video puedes usar Jwplayer.

Saludos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.