Video galería con Bootstrap y PHP
La galería de videos con Bootstrap es un componente muy importante a tener en cuenta a la hora de querer añadir vídeos a nuestros sitios, muchas veces surge la necesidad crear una forma elegante de mostrar vídeos dentro de una ventana modal de forma dinámica, es por ello que me di la tarea de crear este pequeño script para que nos facilite dicha tarea.
Realmente no se necesita de tener conocimientos avanzados en CSS, para darle un aspecto elegante a nuestra ventana modal; ni mucho menos conocimientos avanzado en JavaScript, solo es necesario algunos conocimientos básico de HTML.
Lo que haremos:
Primero voy a crear un archivo y lo nombrare index.php, luego de haber creado dicho archivos, vamos a copiar la siguiente estructura html básica.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Video responsive dentro de una ventana modal</title> </head> <body> <!-- Page Content --> <div class="container"> <h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Video responsive dentro de una ventana modal</h1> <hr class="mt-2 mb-5"> <div class="row text-center text-lg-left"> <!--Modal: Name--> <div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <!--Content--> <div class="modal-content"> <!--Body--> <div class="modal-body mb-0 p-0"> <div class="embed-responsive embed-responsive-16by9 z-depth-1-half"> <iframe class="embed-responsive-item" src="" allowfullscreen></iframe> </div> </div> <!--Footer--> <div class="modal-footer justify-content-right"> <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Cerrar</button> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Name--> </div> </div> <!-- /.container --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html> |
Ahora vamos a crear dentro del directorio root que estamos trabajando una carpeta para almacenar las imágenes que usaremos como miniatura de los videos, yo la he nombrado images.
Creando el archivo script.js
Crea en el directorio root un nuevo archivo y lo nombras script.js, luego pega el siguiente fragmento de código:
|
1 2 3 4 5 6 7 8 9 10 11 |
$('#modal4').on('show.bs.modal', function (event) { var button = $(event.relatedTarget) var video = button.data('url') //$("#myFrame").attr('src',video); $('#modal4 iframe').attr("src", video); }) $('#modal4').on('hidden.bs.modal', function (e) { // Quitar la reproduccion del video al ocutar el modal $('#modal4 iframe').attr("src", $("#modal4 iframe").attr("src")); }); |
El archivo script.js se va encargar de cargar de forma dinámica en nuestra ventana modal los videos que vayamos añadiendo
Creando el archivo data.php
Este archivo data.php se va encargar de guardar un arreglo de datos, al cual le pasaremos la ruta de las imágenes miniaturas de nuestros videos así como también la url del vídeo que queremos mostrar en la ventana modal. Para eso vamos a crear siempre en el directorio root de nuestro proyecto dicho archivo y le copiaremos el siguiente fragmento:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php /*Array de datos para darle valores dinamicos a nuestro video modal*/ $info[]=array( "url_imagen"=>"images/1.jpg", "url_video"=>"https://www.youtube.com/embed/L9V7Zz95zgM" );//Agreglo de datos 1 $info[]=array( "url_imagen"=>"images/2.jpg", "url_video"=>"https://www.youtube.com/embed/ybTEaPZdvU8" );//Agreglo de datos 2 $info[]=array( "url_imagen"=>"images/3.jpg", "url_video"=>"https://www.youtube.com/embed/kgKBjb1heTc" ); //Agreglo de datos 3 ?> |
Finalmente debemos añadirle un poco de interacción a nuestra galería de video, buscamos la linea que contenga el siguiente fragmento “<div class=”row text-center text-lg-left”>”, esto es en el archivo index.php que hicimos en el paso 1, luego de localizada dicha linea vamos añadir el siguiente código PHP:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php include("data.php"); foreach ($info as $key=>$value){ ?> <!-- Grid column --> <div class="col-lg-4 col-md-6 mb-4"> <a href="#" data-toggle="modal" data-target="#modal4" data-url="<?=$value['url_video']?>" > <img class="img-fluid z-depth-1" src="<?=$value['url_imagen']?>" alt="video"> </a> </div> <!-- Grid column --> <?php } ?> |
El código anterior lo que hará es añadirle un poco de dinamismo a la galería al recorrer cada uno de los elementos del array contenidos en el archivo llamado data.php.
Finalmente así es como deberá quedar la estructura del archivo index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <title>Video responsive dentro de una ventana modal</title> </head> <body> <!-- Page Content --> <div class="container"> <h1 class="font-weight-light text-center text-lg-left mt-4 mb-0">Video responsive dentro de una ventana modal</h1> <hr class="mt-2 mb-5"> <div class="row text-center text-lg-left"> <?php include("data.php"); foreach ($info as $key=>$value){ ?> <!-- Grid column --> <div class="col-lg-4 col-md-6 mb-4"> <a href="#" data-toggle="modal" data-target="#modal4" data-url="<?=$value['url_video']?>" > <img class="img-fluid z-depth-1" src="<?=$value['url_imagen']?>" alt="video"> </a> </div> <!-- Grid column --> <?php } ?> <!--Modal: Name--> <div class="modal fade" id="modal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg" role="document"> <!--Content--> <div class="modal-content"> <!--Body--> <div class="modal-body mb-0 p-0"> <div class="embed-responsive embed-responsive-16by9 z-depth-1-half"> <iframe class="embed-responsive-item" src="" allowfullscreen></iframe> </div> </div> <!--Footer--> <div class="modal-footer justify-content-right"> <button type="button" class="btn btn-outline-primary btn-rounded btn-md ml-4" data-dismiss="modal">Cerrar</button> </div> </div> <!--/.Content--> </div> </div> <!--Modal: Name--> </div> </div> <!-- /.container --> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> <script src="script.js"></script> </body> </html> |
Recuerda que puedes echarle un vistazo al demo de este script, o si prefieres puedes descargarlo.
