How do I open a player when I click on a div?

Good, I am trying to make a web page where video titles and their respective thumbnails are shown and when clicking on them, a small player appears in the middle of the page that has the option to put it in full screen.

This would be the interface of the page:

The scroll is because there are more videos, but I assume that these two examples are understood. What I do not know is how to make click on any part of the div (divided by colors) A player opens without leaving the page. The player that I would like it to appear would be YouTube. I guess you have to do something with javascript but I have not found any information that has been useful.

I say I suppose you have to do something with javascript which is what I have looked at and I have not found anything useful. I have tried with the function toggle () of JQuery but I can not get it as I pretend, because with this I only show and hide the player but not that it appears in the middle of the screen.

I leave the HTML + JS code:

        $(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();
        });

So far the 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>

I do not put the CSS code or Javascript because it has nothing relevant to this doubt.