• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página
Pampua

Pampua

Diseño web y marketing online

  • Servicios
    • Diseño web
    • Marketing digital
    • Mantenimiento web
  • Portfolio
  • Sobre mi
  • Blog
  • Contacto

Cómo publicar vídeos de youtube de manera responsive en WordPress

Queremos compartir la solución que hemos encontrado para publicar vídeos de youtube incrustados en una entrada de nuestro Wordpress de manera responsive sin usar plugins ni short codes. Es muy sencillo, sólo hay que añadir un poco de CSS y asignarle una clase a un DIV que envuelva el código del vídeo

18/01/2018 Por Ramón Deja un comentario

Queremos compartir la solución que hemos encontrado para publicar vídeos de youtube incrustados en una entrada de nuestro WordPress de manera responsive sin usar plugins ni short codes.

Hoy te voy a contar:

  • El problema
  • La solución
  • Código CSS
  • Código HTML

El problema

Al diseñar una página web responsive para WordPress, un problema con el que nos podemos encontrar son los vídeos incrustados. Si no creamos estilos específicos para ello, los vídeos tienen un ancho fijo que nos romperá el diseño adaptable.

La solución

La solución es envolver el vídeo en un DIV con una clase y asignarle estilos con CSS, es muy sencillo, tan sólo hay que añadir este código en vuestro fichero CSS:

Código CSS

.video-responsive {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-responsive iframe,  
.video-responsive object,  
.video-responsive embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}

Ahora lo único que hay que hacer es aplicarle la clase .video-responsive con un div:

Código HTML

<div class="video-responsive"> Código del vídeo incrustado </div>

Un ejemplo con un vídeo de YouTube:

<div class="video-responsive">
<iframe width="560" height="300" src="https://www.youtube.com/embed/Nr72D-DMSo0" 
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

Como ejemplo hemos utilizado un vídeo de YouTube por ser lo más habitual, pero funciona con cualquier otro tipo de vídeos: Vimeo, SlideShare…

Esperamos que esta información te sea de utilidad. Si te ha gustado háznoslo saber en los comentarios y danos 5 estrellas 😉

Si necesitas que te ayudemos a configurar algo en tu web, ponte en contacto con nosotros.

Quizá te interese:

Google recomienda usar SSL
Alergias, ejercicio, campañas locales y paquetizar servicios
Cómo eliminar los anuncios que inserta ShareAlcoholic

Publicado en: Diseño web Etiquetado como: responsive, video, wordpress

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Contacta conmigo

De L a V de 9:00 – 21:00
Av. Maisonnave, 5, 8D, 03003 Alicante
Aviso legal - Privacidad
© 2002–2023 Ramón Prats

Podcast

En los 122 episodios del podcast "Diseño Web" he ido compartiendo un montón de consejos para que puedas optimizar tu web fácilmente.

Newsletter

Apúntate y accede a contenido exclusivo gratis con el que quincenalmente te ayudaré a mejorar tu presencia online.

Blog

Lee las últimas publicaciones del blog o mejor aún, suscríbete por RSS. Dicen que de vez en cuando publico algo interesante ;-)

Uso las dichosas cookies para darte una mejor experiencia en esta web.

Puedes informarte más sobre qué cookies uso o desactivarlas en los AJUSTES.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

Utilizo las cookies en mi web para poder ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a visitar la web o ayudarme a comprender qué secciones de la web encuentras más interesantes y útiles.

Cookies estrictamente necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!