WordPress Video Responsive automáticamente

Usando un Plugins

Descargando el plugins FitVids for WordPress

Apariencia --> FitVids  (Para configurar el plugins)

Para verlo funcionar devemos insertar el codigo que nos proporciona youtube  en nuestro editor de codigo 

Usando Codigo PHP

Podemos usar esta función en nuestro functions.php que nos evitará tener que escribir el código de los div en el editor de entradas cuando insertemos un vídeo de Youtube o Vimeo

// Videos responsive autómaticos
if(!function_exists('video_content_filter')) {
	function video_content_filter($content) {

        // busca algún iFrame en la página
		$pattern = '/<iframe.*?src=".*?(vimeo|youtu\.?be).*?".*?<\/iframe>/';
		preg_match_all($pattern, $content, $matches);

		foreach ($matches[0] as $match) {
			// iFrame encontrado, ahora lo envolvemos en un DIV ...
			$wrappedframe = '<div class="flex-video">' . $match . '</div>';

			// Intercambia el original con el video, ahora encerrado
			$content = str_replace($match, $wrappedframe, $content);
		}
		return $content;
	}
	// Aplicar a areas de contenido de la página o entrada 
	add_filter( 'the_content', 'video_content_filter' );

	// Aplicar a los widgets si se quiere
	add_filter( 'widget_text', 'video_content_filter' );
}

El CSS necesario para que funcione necesitamos añadir a nuestra hoja de estilos.

div.flex-video {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin: 50px 0; /* esto es opcional */
  clear: both;
}

div.flex-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Una vez hecho esto podemos insertar vídeos de dos formas:

Simplemente pegando la url en el editor de entradas o pegando el código embed que nos ofrece Youtube o Vimeo. Yo recomiendo la primera, ya que es la más sencilla y funciona a la perfección.

Automáticamente nuestros vídeos estarán envueltos en un div con la clase flex-video.

Fuente:

https://www.linkedin.com/learning/desarrollo-de-proyectos-digitales-con-wordpress-trucos/como-gestionar-los-errores-de-bases-de-datos-en-wordpress