Tutorial: Videos responsivos en wordpress y otras plataformas

  • Autor Autor luisz
  • Fecha de inicio Fecha de inicio
luisz

luisz

Delta
Verificación en dos pasos activada
Youtube responsive

Hola forobetanos, hoy vengo a enseñarles cómo hacer que al insertar sus videos en wordpress o la plataforma que uses queden responsivos.
aveces pasa que tenemos un theme responsive e insertados videos en las entradas, pero es una porquería ver que al admirarlo desde un dispositivo bien sea una tablet,phablet o un telefono el video redimencione la página donde está insertado y dañe su diseño.
youtube solo ofrece un código pobre carente de algún arreglo responsivo, pero esto podemos solucionarlo de la siguiente manera:
nos dirigimos a : embedresponsively.com

veremos algo asi:

0ak79K9.png


Veremos que ofrece un generador para casi cualquier tipo de servidor de videos, hasta los más genéricos, en éste ejemplo usaremos youtube como ejemplo.

1. nos vamos a youtube y nos dirigimos al video que queremos hacer responsive y copiamos su url:

hL5qPbr.png


después pegamos el link de nuestro video de youtube en la página anteriormente mencionada y damos click en el botón embed así:

07nGemm.png


El resultado será algo similar a esto:

07nGemm.png


Para probar los resultados van a su plataforma donde quieren publicar su video, deben copiar el código generado que les ofreció la página y publicarlo en su plataforma, yo para éste ejemplo escogí wordpress, entonces vamos a ello!

Publicamos el embed en nuestra entrada:

DRXUKqJ.png


El resultado será el siguiente:

Desde una computadora normal:

G0LcSV9.png


Desde un telefono celular (para confirmarlo usé mi propio móvil)

Cg5jgCk.png


Algunas ideas que puedo darles en sus proyectos es por ejemplo si quieren que sus usuarios puedan ver los videos de sus diferentes servidores haganlos responsives, casi en todas las páginas que entro desde el telefono a ver series son una porquería para ver los videos algunas ofrecen "versión móvil" pero con la herramienta hacen a todos sus videos responsives, no es culpa del webmaster es culpa del servidor de videos que no ofrece un código responsive, con éste generador se soluciona básicamente ese problema a casi todas las plataformas.
 
Última edición:
Me servirá de mucho, gran aporte :encouragement:
 
Excelente aporte luisz directo a favoritos
 
Muchísimas gracias, justo lo necesitaba :encouragement:
 
Muchísimas gracias, justo lo necesitaba :encouragement:

Yo igual buscaba algo así hace rato, estaba haciendo un proyecto y me di cuenta que era una basura tener que hacer responsive a mano, gracias por comentar :encouragement:
 
Yo en mis themes de WP agrego:
HTML:
<style>
	.embed-youtube iframe { width: 100%; margin: 0 0 20px 0; max-width: 790px;}
</style>

y listo sin mas cosas!
 
Muy bueno, tienes mi like.
 
Muy buen tutorial, me vino como anillo al dedo amigo, andaba pensando en esto para un proyecto nuevo que tengo, asi que que mas, hoy la suerte esta conmigo ajajajaja, excelente, una cosa menos de que preocuparme hoy xDDD

Gracias gran tutorial, súper sencillo y entendible 100% :encouragement:
 
Yo en mis themes de WP agrego:
HTML:
<style>
	.embed-youtube iframe { width: 100%; margin: 0 0 20px 0; max-width: 790px;}
</style>

y listo sin mas cosas!

Es una manera más corta que con el generador, no habría que ponerle una clase a el div que contiene el código del vídeo?
gracias por comentar la forma en la que lo implementas, deseguro a muchos acá les va a servir
 
Es una manera más corta que con el generador, no habría que ponerle una clase a el div que contiene el código del vídeo?
gracias por comentar la forma en la que lo implementas, deseguro a muchos acá les va a servir

no, el codigo de youtube es un iframe, eso abarca a la clase de youtube y dentro el iframe...
 
Muy buen tutorial, me vino como anillo al dedo amigo, andaba pensando en esto para un proyecto nuevo que tengo, asi que que mas, hoy la suerte esta conmigo ajajajaja, excelente, una cosa menos de que preocuparme hoy xDDD

Gracias gran tutorial, súper sencillo y entendible 100% :encouragement:


Yo creo que es algún tipo de mensaje divino 😱
quizás te irá bien con el proyecto que quieres realizar, la verdad es muy fácil de resolver los problemas de responsive design en los vídeos, pero muchos no saben como solucionarlos y se lían, un gusto poder haberte dado una solución, [MENTION=9679]cicklow[/MENTION] también dio una excelente recomendación.
 
Yo creo que es algún tipo de mensaje divino 😱
quizás te irá bien con el proyecto que quieres realizar, la verdad es muy fácil de resolver los problemas de responsive design en los vídeos, pero muchos no saben como solucionarlos y se lían, un gusto poder haberte dado una solución, [MENTION=9679]cicklow[/MENTION] también dio una excelente recomendación.

Jejeje cierto, ando es con un proyecto de mi blog en plantilla movil, asi los videos de los capitulos se veran super bien en el movil, los servidores que utilizare son dailymotion, vk y rutube, asi que pienso que deberian de funcionar para los 2 ultimos ciertos?
 
Jejeje cierto, ando es con un proyecto de mi blog en plantilla movil, asi los videos de los capitulos se veran super bien en el movil, los servidores que utilizare son dailymotion, vk y rutube, asi que pienso que deberian de funcionar para los 2 ultimos ciertos?

hay una sección para servidores genéricos, debes probar poniendo el iframe en el generador y testearlo, aunque creo que si ya que todos los seridores funcionan casi igual: iframe con la pelicula flash que contiene el video (o etiqueta video de html5), y algunos contienen un div para darle estilo a los iframes, el generador crea una clase y apartir de esa clase le da los atributos a el iframe de tu video.
 
Yo creo que es algún tipo de mensaje divino 😱
quizás te irá bien con el proyecto que quieres realizar, la verdad es muy fácil de resolver los problemas de responsive design en los vídeos, pero muchos no saben como solucionarlos y se lían, un gusto poder haberte dado una solución, [MENTION=9679]cicklow[/MENTION] también dio una excelente recomendación.

Ya no hace falta amigo, ya prove y efectivamente funciona con Rutube y Vk, asi que mucho mejor aun! Gracias otra vez :encouragement:

Saludos
 
Gracias por compartirlo. Muy fácil de hacerlo, me quedó perfecto.
 
Atrás
Arriba