'Responsive' YouTube en artículos Joomla

Escrito por Oscar Morales Guevara el . Publicado en SOCIAL MEDIA

Ratio: 5 / 5

Inicio activadoInicio activadoInicio activadoInicio activadoInicio activado
 
Responsive YouTube en Joomla

Aprenda a publicar videos Youtube para que se comporten 'Responsive´ en su sitio Joomla, sin que se distorsione el contenido en tablets y smartphones.

Por Oscar Morales Guevara

Los diseños 'Responsive' están de moda, son la nueva tendencia del diseño web para Jommla, Drupal, Wordpress y demás Administradores de contenido. La tecnología 'Responsive' es la que permite que el contenido de un sitio se adapte al tamaño de la pantalla de los dispositivos móviles, ya sean smartphones o tablets. Sin embargo, la mayoría de diseñadores se ha enfrentado con el problema que al querer embeber un video YouTube o de Vimeo en un artículo, este se despliega con dimensiones fijas que no se adaptan al tamaño de la pantalla, destruyendo por completo el diseño 'Responsive' del artículo que hospeda dicho video.  

La solución a este problema es muy sencilla. Basta con agregar el siguiente código CSS en la hoja de estilos custom.css del sitio web (o en la hoja de estilos principal), en la cual definiremos el contenedor de video con propiedades 'Responsive'.

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Antes de embeber el código en su artículo Joomla, asegúrese previamente que las opciones del 'TinyMCE Editor' hayan sido ajustadas para que nunca remueva la etiqueta <iframe> del código HTML de los artículos, algo que Joomla hace de manera predeterminada. Para corregir este comportamiento vaya al 'Plugin Manager', haga click en el Editor TinYMCE para entrar a sus propiedades, y en 'Opciones Básicas' remueva la palabra iframe del recuadro de 'Elementos Prohibidos'. Una vez haya hecho estos cambios ya puede ir a su artículo, donde agregará el siguiente código para embeber su video. Si es un video de Youtube utilice el siguiente ejemplo de código, simplemente cambiando el ID del video:

<div class="video-container"> <iframe src="http://www.youtube.com/embed/3hN106kKeoE  frameborder="0" width="560" height="315"> </iframe> </div>

Si es un video de Vimeo utilice el siguiente ejemplo de código, cambiando el ID del video:

<iframe src="//player.vimeo.com/video/53363499" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

 A continuación vea un ejemplo de cómo luce un video 'Responsive' de Youtube. Para probar su comportamiento, cambie el tamaño de la ventana de su navegador para que observe como el video se estira o encoge según el ancho de ventana que haya elegido. De igual manera el video se adaptará a las pantallas de cualquier dispositivo móvil, logrando el objetivo propuesto de conservar el diseño 'Responsive' de la plantilla Joomla.

Y por último, un ejemplo de video 'Responsive' de Vimeo que también se adapta al tamaño de la ventana del navegador.

Oscar Morales Guevara
@oscarmoralesg

Oscar Morales Guevara

Oscar Morales Guevara
CEO Estrategia & Marketing Digital -Barranquilla, Colombia
Fundador del movimiento 'Un Millón de Voces contra las FARC'. Antiguo Fellow del Instituto George W. Bush. Consejero de One Young World, Embajador de Movements.org. Conferencista internacional en temas de social media, activismo digital y causas. Actualmente es Consultor en Social Media, Estrategia Digital y Campañas virales.

  .

 

'Responsive' YouTube en artículos Joomla - 5.0 out of 5 based on 1 vote
CONSULTORÍA EN ESTRATEGIA Y MARKETING DIGITAL 
Social Media Partner 
Redes Sociales, Posicionamiento, Marketing Social
Copyright © 2015 - OSCAR MORALES GUEVARA
Barranquilla, Colombia
Sígueme en TwitterSígueme en FacebookSígueme en PinterestSígueme en Google PlusSígueme en LinkedInSígueme en YouTube
www.socialmediapartner.co 
Correo de contacto: Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.

Join now and claim bonus william hill uk - wbetting.co.uk