Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Galería de Video Youtube Responsive

Buenos días amigos

¿Podría alguien ayudarme para realizar una galería de videos de Youtube que fuera responsive?

Un saludo y muchisimas gracias
0
Puntos
3209
Visitas
16
Resp
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #1
hola que tal, cuanto tiempo https://datoweb.com/post/3064/galeria-de-videos-de-youtube-responsive-gratis

si te sirve de ayuda comparte please

salu2
1
Puntos
Por alber hace 68 meses
Administrador
Respuesta #2
alber dijo: hola que tal, cuanto tiempo https://datoweb.com/post/3064/galeria-de-videos-de-youtube-responsive-gratis

si te sirve de ayuda comparte please

salu2
Verdad que si Alber! Hacía tiempo que no entraba. He estado un poco desconectado! Tu que tal?

Muchisimas gracias por el aporte. Es justamente lo que necesitaba.

Un abrazo grande!
1
Puntos
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #3
alber dijo: hola que tal, cuanto tiempo https://datoweb.com/post/3064/galeria-de-videos-de-youtube-responsive-gratis

si te sirve de ayuda comparte please

salu2
Buenas tardes Alber

Al implementar la galeria no me aparece nada. He enlazado todos los archivos y he copiado tal y como viene en el ejemplo, pero no sale nada.

Lo he probado tanto en local como subiendolo a un servidor y no aparece nada. ¿Me puedes ayudar?

Muchas gracias!!

Miguel A.
0
Puntos
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #4
MiGuEJeReZ dijo:
alber dijo: hola que tal, cuanto tiempo https://datoweb.com/post/3064/galeria-de-videos-de-youtube-responsive-gratis

si te sirve de ayuda comparte please

salu2
Buenas tardes Alber

Al implementar la galeria no me aparece nada. He enlazado todos los archivos y he copiado tal y como viene en el ejemplo, pero no sale nada.

Lo he probado tanto en local como subiendolo a un servidor y no aparece nada. ¿Me puedes ayudar?

Muchas gracias!!

Miguel A.
haz una cosa, descarga de nuevo el proyecto, lo descomprimes tal cual y ejecutas el index.html

después me comentas que visualizas cuando lo abres please

salu2
1
Puntos
Por alber hace 68 meses
Administrador
Respuesta #5
alber dijo:
MiGuEJeReZ dijo:
alber dijo: hola que tal, cuanto tiempo https://datoweb.com/post/3064/galeria-de-videos-de-youtube-responsive-gratis

si te sirve de ayuda comparte please

salu2
Buenas tardes Alber

Al implementar la galeria no me aparece nada. He enlazado todos los archivos y he copiado tal y como viene en el ejemplo, pero no sale nada.

Lo he probado tanto en local como subiendolo a un servidor y no aparece nada. ¿Me puedes ayudar?

Muchas gracias!!

Miguel A.
haz una cosa, descarga de nuevo el proyecto, lo descomprimes tal cual y ejecutas el index.html

después me comentas que visualizas cuando lo abres please

salu2
Albert lo he descargado y así si funciona, pero en mi proyecto no. Es muy raro
1
Puntos
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #6
entonces?? si funciona en la carpeta debe de funcionar en tu proyecto.. supongo que estas fallando en las librerias

te explico un poco, si has metido la carpeta de la galería tal cual a ti proyecto tienes que poner las librerías en la pagina donde quieres que se vea la galería.

supongamos que quieres que se vea en la pagina mipagina.php y que la tienes guardada en la carpeta video-galeria, pues tiene que quedar algo así:

mipagina.php:
<link rel="stylesheet" href="video-galeria/estilos.css">
<script src="video-galeria/efectos.js"></script>
después para cargar el html en la misma pagina:
<script>
	
$(document).ready(function(){
	var videos = "https://www.youtube.com/watch?v=U9R-PUhwv_0, https://www.youtube.com/watch?v=SQUVpJTAZaA, https://www.youtube.com/watch?v=yD7VXo_Y3Nc, https://www.youtube.com/watch?v=niN6UDeZ4Tw";

		// cargar galeria de vídeos
		crear_galeria(videos);

});

</script>

	<div class="contenedor">

<div class="video-galeria">
	<div class="video-ver">
<div class="video-container">
<iframe src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>

<div class="video-lista">
	<ul>
	</ul>
</div>

</div>

</div>
por supuesto tienes que estar usando jquery en esa misma pagina para que esto funcione, mira como esta funcionando en la demo, también lo puedes hacer así

puedes ir copiando de la demo el js en tu fichero .js que usas habitualmente, el css lo mismo y el html copiarlo donde quieras que aparezca https://codepen.io/datoweb/pen/RBMxRG
1
Puntos
Por alber hace 68 meses
Administrador
Respuesta #7
ten en cuenta que si estas usando php y una pagina verpost.php por ejemplo tienes que usar rutas absolutas:
<link rel="stylesheet" href="<?php echo $dato['0']; ?>video-galeria/estilos.css">
<script src="<?php echo $dato['0']; ?>video-galeria/efectos.js"></script>
de esa manera te carga seguro ;P
1
Puntos
Por alber hace 68 meses
Administrador
Respuesta #8
alber dijo: ten en cuenta que si estas usando php y una pagina verpost.php por ejemplo tienes que usar rutas absolutas:
<link rel="stylesheet" href="<?php echo $dato['0']; ?>video-galeria/estilos.css">
<script src="<?php echo $dato['0']; ?>video-galeria/efectos.js"></script>
de esa manera te carga seguro ;P
Buenos días Alber,

Sigue sin funcionar. Seguro que estoy haciendo algo mal. Lo ultimo que me pusiste de las rutas absolutas no lo he mirado porque todavia no tengo la base de datos creada. Solo estoy con el diseño . ¿Hay alguna posibilidad que te envíe el proyecto a algún correo por si me lo puedes mirar?

Un saludo y muchas gracias
0
Puntos
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #9
Ok pon el código completo de la página donde lo estás implementando aquí en el tema y dime qué nombre le has puesto a la carpeta de la galería que supongo tendrás dentro de la raíz del sitio

Sau2
1
Puntos
Por alber hace 68 meses
Administrador
Respuesta #10
alber dijo: Ok pon el código completo de la página donde lo estás implementando aquí en el tema y dime qué nombre le has puesto a la carpeta de la galería que supongo tendrás dentro de la raíz del sitio

Sau2

Buenos días Alber

Te adjunto el código:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Incienso Cofrade</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,700" rel="stylesheet">
    <script src="js/efectos.js"></script>
    <link rel="stylesheet" href="css/estilos.css">
    <link rel="stylesheet" href="css/styles.css">
    
</head>
<body>
      
   <!-- Header y Menú -->
    
    <header class="header pt-4">
        <div class="container">
            <div class="row justify-content-between">
                <div class="col-md-4">
                    <img src="img/logo.png" class="img-fluid" alt="">
                </div>
                <div class="col-md-5">
                    <nav class="nav d-flex justify-content-end flex-column flex-md-row">
                        <a href="#" class="nav-link">Regístrese</a>
                        <a href="#" class="nav-link">Iniciar Sesión</a>
                        <a href="#" class="btn btn-outline-light text-light">Acceder</a>
                    </nav>
                </div><!-- .col -->
            </div><!-- .row -->
        </div><!-- .container -->
        <div class="container">
            <div class="row justify-content-center buscador align-items-center">
                <div class="col-md-8 text-light text-center">
                    <h1 class="display-4 titulo">Toda la información de la Semama Santa de Jerez</h1>
                    <p>Radio en directo</p>
                    <form action="#" class="busqueda mt-5">
                        <div class="input-group">
                            <input type="text" class="form-control" placeholder="¿Qué buscas?" required>
                            <div class="input-group-append">
                                <input type="submit" value="Buscar" class="px-5 py-3 btn btn-lg btn-success" value="Buscar">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </header>
     
    <!-- Fin de Header y Menú -->
      
    
    <section class="noticias mt-5 py-5">
        
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="card">
                        <img src="img/bondadnoticia.JPG" class="card-img-top" alt="">
                        <div class="card-meta bg-primary p-2 text-light text-center">
                            <p class="m-0">20 / Mayo / 2018 18:00 Hrs</p>
                        </div><!-- .card-meta -->
                        <div class="card-body">
                            <h3 class="card-title">
                                Cambio de capataz en la Cena
                            </h3>
                            <p class="card-subtitle my-3">
                                La Hermandad lo anunció en el Cabildo de salida
                            </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, commodi rerum, harum accusantium magni nisi.</p>
                            <a href="#">Más Información</a>
                        </div>
                    </div><!-- .card -->
                </div><!-- .col-md-4 -->
                <div class="col-md-4">
                    <div class="card">
                        <img src="img/clemencianoticia.jpg" class="card-img-top" alt="">
                        <div class="card-meta bg-primary p-2 text-light text-center">
                            <p class="m-0">20 / Mayo / 2018 18:00 Hrs</p>
                        </div><!-- .card-meta -->
                        <div class="card-body">
                            <h3 class="card-title">
                                Cambio de capataz en la Cena
                            </h3>
                            <p class="card-subtitle my-3">
                                La Hermandad lo anunció en el Cabildo de salida
                            </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, commodi rerum, harum accusantium magni nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint explicabo doloribus necessitatibus officiis, hic eum natus eos iure dolor quibusdam sunt pariatur numquam impedit sed labore cupiditate ipsam at molestias.</p>
                            <a href="#">Más Información</a>
                        </div>
                    </div><!-- .card -->
                </div><!-- .col-md-4 -->
                <div class="col-md-4">
                    <div class="card">
                        <img src="img/bondadnoticia.JPG" class="card-img-top" alt="">
                        <div class="card-meta bg-primary p-2 text-light text-center">
                            <p class="m-0">20 / Mayo / 2018 18:00 Hrs</p>
                        </div><!-- .card-meta -->
                        <div class="card-body">
                            <h3 class="card-title">
                                Cambio de capataz en la Cena
                            </h3>
                            <p class="card-subtitle my-3">
                                La Hermandad lo anunció en el Cabildo de salida
                            </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, commodi rerum, harum accusantium magni nisi.</p>
                            <a href="#">Más Información</a>
                        </div>
                    </div><!-- .card -->
                </div><!-- .col-md-4 -->
                <div class="col-md-4">
                    <div class="card">
                        <img src="img/bondadnoticia.JPG" class="card-img-top" alt="">
                        <div class="card-meta bg-primary p-2 text-light text-center">
                            <p class="m-0">20 / Mayo / 2018 18:00 Hrs</p>
                        </div><!-- .card-meta -->
                        <div class="card-body">
                            <h3 class="card-title">
                                Cambio de capataz en la Cena
                            </h3>
                            <p class="card-subtitle my-3">
                                La Hermandad lo anunció en el Cabildo de salida
                            </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, commodi rerum, harum accusantium magni nisi.</p>
                            <a href="#">Más Información</a>
                        </div>
                    </div><!-- .card -->
                </div><!-- .col-md-4 -->
                <div class="col-md-4">
                    <div class="card">
                        <img src="img/bondadnoticia.JPG" class="card-img-top" alt="">
                        <div class="card-meta bg-primary p-2 text-light text-center">
                            <p class="m-0">20 / Mayo / 2018 18:00 Hrs</p>
                        </div><!-- .card-meta -->
                        <div class="card-body">
                            <h3 class="card-title">
                                Cambio de capataz en la Cena
                            </h3>
                            <p class="card-subtitle my-3">
                                La Hermandad lo anunció en el Cabildo de salida
                            </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, commodi rerum, harum accusantium magni nisi.</p>
                            <a href="#">Más Información</a>
                        </div>
                    </div><!-- .card -->
                </div><!-- .col-md-4 -->
                <div class="col-md-4">
                    <div class="card">
                        <img src="img/bondadnoticia.JPG" class="card-img-top" alt="">
                        <div class="card-meta bg-primary p-2 text-light text-center">
                            <p class="m-0">20 / Mayo / 2018 18:00 Hrs</p>
                        </div><!-- .card-meta -->
                        <div class="card-body">
                            <h3 class="card-title">
                                Cambio de capataz en la Cena
                            </h3>
                            <p class="card-subtitle my-3">
                                La Hermandad lo anunció en el Cabildo de salida
                            </p>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, commodi rerum, harum accusantium magni nisi.</p>
                            <a href="#">Más Información</a>
                        </div>
                    </div><!-- .card -->
                </div><!-- .col-md-4 -->
            </div><!-- .row -->
        </div><!-- .container -->
    </section>
    
    <!-- Radio -->
    
    <div class="radio bg-dark">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6 text-light text-center text-md-left py-5">
                    <h2>El Respiradero</h2>
                    <p>Disfruta de nuestro programa de radio cofrade online</p>
                    <a href="#" class="btn btn-outline-light">Leer más</a>
                </div>
                <div class="col-md-6 py-5">
                   <iframe src="https://widget.spreaker.com/player?episode_id=14589123&theme=light&playlist=show&playlist-continuous=false&autoplay=false&live-autoplay=true&chapters-image=true&hide-logo=false&hide-likes=false&hide-comments=false&hide-sharing=false" width="100%" height="380px" frameborder="0"></iframe>
                    
                </div>
            </div>
        </div>
    </div>
    
    <script>
	
$(document).ready(function(){
	var videos = "https://www.youtube.com/watch?v=U9R-PUhwv_0, https://www.youtube.com/watch?v=SQUVpJTAZaA, https://www.youtube.com/watch?v=yD7VXo_Y3Nc, https://www.youtube.com/watch?v=niN6UDeZ4Tw";

		// cargar galeria de vídeos
		crear_galeria(videos);

});



</script>


<div class="video-galeria">
	<div class="video-ver">
<div class="video-container">
<iframe src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>

<div class="video-lista">
	<ul>
	</ul>
</div>
    </div>


    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>


</body>
</html>
La carpeta ahora mismo es la misma carpeta raiz. Ya que ahora mismo solo estoy haciendo el diseño.

Un saludo y muchas gracias

0
Puntos
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #11
hola que tal! pues mira de momento veo que tienes el jquery en la parte de abajo y el fichero js/efectos.js (que supongo será el de la galería) en la parte de arriba.

entonces como la galería funciona con jquery y no lo cargas hasta después... es normal que no te funcione!

ademas tienes el jquery.slim y no estoy seguro de que te sirva, haz lo siguiente.. pasa esta linea:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
a la parte de arriba del fichero es decir que quede encime de esta:
<script src="js/efectos.js"></script>
si con eso no te funciona agrega esta en el mismo sitio:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
es cuestión de probar en tu proyecto, salu2
1
Puntos
Por alber hace 68 meses
Administrador
Respuesta #12
alber dijo: hola que tal! pues mira de momento veo que tienes el jquery en la parte de abajo y el fichero js/efectos.js (que supongo será el de la galería) en la parte de arriba.

entonces como la galería funciona con jquery y no lo cargas hasta después... es normal que no te funcione!

ademas tienes el jquery.slim y no estoy seguro de que te sirva, haz lo siguiente.. pasa esta linea:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
a la parte de arriba del fichero es decir que quede encime de esta:
<script src="js/efectos.js"></script>
si con eso no te funciona agrega esta en el mismo sitio:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
es cuestión de probar en tu proyecto, salu2
Perfecto Alber!!! Ya me sale!!! Muchisimas gracias crack!

Un abrazo muy grande!!!
1
Puntos
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #13
alber dijo: hola que tal! pues mira de momento veo que tienes el jquery en la parte de abajo y el fichero js/efectos.js (que supongo será el de la galería) en la parte de arriba.

entonces como la galería funciona con jquery y no lo cargas hasta después... es normal que no te funcione!

ademas tienes el jquery.slim y no estoy seguro de que te sirva, haz lo siguiente.. pasa esta linea:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
a la parte de arriba del fichero es decir que quede encime de esta:
<script src="js/efectos.js"></script>
si con eso no te funciona agrega esta en el mismo sitio:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
es cuestión de probar en tu proyecto, salu2

Buenos días Alber

Ya está todo solucionado. Ahora una pregunta.

Si yo quiero sacar los videos de una base de datos.... ¿como sería?

Yo ya tengo creada la tabla con un id y con otro campo llamado youtube donde introduzco las direcciones de youtube de los videos. Pero ¿De que forma lo pongo en la variable, para que me muestre los 4 últimos videos subidos?

Un saludo y muchas gracias crack!
<script>	
         $(document).ready(function(){
	       var videos = "https://www.youtube.com/watch?v=QW35wa1RRoE, https://www.youtube.com/watch?v=M4gycTzTNcE, https://www.youtube.com/watch?v=XDklz-mQGSY, https://www.youtube.com/watch?v=a0nz8JfL8WQ";

		  // cargar galeria de vídeos
		  crear_galeria(videos);
        });
    </script>


0
Puntos
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #14
MiGuEJeReZ dijo:Buenos días Alber

Ya está todo solucionado. Ahora una pregunta.

Si yo quiero sacar los videos de una base de datos.... ¿como sería?

Yo ya tengo creada la tabla con un id y con otro campo llamado youtube donde introduzco las direcciones de youtube de los videos. Pero ¿De que forma lo pongo en la variable, para que me muestre los 4 últimos videos subidos?

Un saludo y muchas gracias crack!
muy sencillo, haciendo una consulta a vídeos y uniendolos usando concatenación, te pongo un ejemplo práctico:
<?php 

// conectar
$conexion = mysqli_connect('localhost', 'root', '', 'datoweb');

$videos = '';
$consulta = $conexion->query('SELECT video FROM videos');

// unir los vídeos
while( $respuesta = $consulta->fetch_array() ){
	$videos .= $respuesta['video'] . ', ';
}

// eliminar la última coma
$videos = substr($videos, 0, -2);

echo $videos; //Devuelve la lista de vídeos separados por coma

?>
después solo tienes que pasarlos a la función:
<script>	
         $(document).ready(function(){
	       var videos = '<?php echo $videos; ?>';

		  // cargar galeria de vídeos
		  crear_galeria(videos);
        });
</script>
:P
1
Puntos
Por alber hace 68 meses
Administrador
Respuesta #15
alber dijo:
MiGuEJeReZ dijo:Buenos días Alber

Ya está todo solucionado. Ahora una pregunta.

Si yo quiero sacar los videos de una base de datos.... ¿como sería?

Yo ya tengo creada la tabla con un id y con otro campo llamado youtube donde introduzco las direcciones de youtube de los videos. Pero ¿De que forma lo pongo en la variable, para que me muestre los 4 últimos videos subidos?

Un saludo y muchas gracias crack!
muy sencillo, haciendo una consulta a vídeos y uniendolos usando concatenación, te pongo un ejemplo práctico:
<?php 

// conectar
$conexion = mysqli_connect('localhost', 'root', '', 'base_datos');

$videos = '';
$consulta = $conexion->query('SELECT video FROM videos');

// unir los vídeos
while( $respuesta = $consulta->fetch_array() ){
	$videos .= $respuesta['video'] . ', ';
}

// eliminar la última coma
$videos = substr($videos, 0, -2);

echo $videos; //Devuelve la lista de vídeos separados por coma

?>
después solo tienes que pasarlos a la función:
<script>	
         $(document).ready(function(){
	       var videos = '<?php echo $videos; ?>';

		  // cargar galeria de vídeos
		  crear_galeria(videos);
        });
</script>
:P
Perfecto Alber! Me has solucionado todo!!

Perdona por ser tan pesado! jajajaja... una ultima preguntita! Cuando cargo la galería me salen los videos en el lado derecho pero el primero en grande no me sale hasta que no pulso en uno de ellos que ya se pone. ¿Tiene que ver algo de que estoy probandolo en local?

un saludo y muchas gracias!
1
Puntos
Por MiGuEJeReZ hace 68 meses
Avanzado Sitio web
Respuesta #16
De nada! XD si no te carga el vídeo de entrada puede que sea por el orden del código de la función que los carga.

Prueba cambiando de sitio la función y si sigue igual recarga la página con la consola abierta y sácale una captura ya que seguro que te aparece un error y lo vemos.

Salu2
1
Puntos
Por alber hace 68 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate