Cómo incorporar videos en WordPress en modo fácil [actualizado 2021]

Los videos hacen un sitio expresivo. Los videos dan vida a las presentaciones del sitio web. Si una imagen vale 60,000 palabras, un video merece mucho más. ¡Y esto es obvio cuando te das cuenta de que en junio de 2021 Tiktok fue la aplicación más descargada para el cuarto mes consecutivo! Y YouTube tiene +2 mil millones de usuarios. ¿Qué significa eso para usted? El video debe estar en la lista de tareas al crear materiales para su sitio web y campañas de marketing. Así que comencemos a aprender a incorporar videos en WordPress. Puede incorporar videos en publicaciones, páginas y barras laterales.
Los videos pueden significar un solo archivo, más videos en un carrusel e incluso enlaces de Vimeo o listas de reproducción de YouTube. Depende de usted si ingresa alguna de estas variantes en su sitio web para que sea más atractiva. Aquí le mostramos cómo incorporar videos en un sitio web de WordPress, esto no es una ciencia de misiles. Todo es simple. Discutiremos dos tipos de incorporación de video:
de fuentes externas como YouTube o Vimeo;
Videos locales alojados.
Te mostraré cómo incorporar videos en WordPress en editores clásicos y estándar.
¿Cómo saber si usa el editor clásico o predeterminado (también llamado Gutenberg)? Bueno, el clásico debería verse así:

El editor predeterminado se ve así:

Incorporación de videos en WordPress de fuentes externas Videos incorporados en páginas o publicaciones de blog de una fuente externa en el editor clásico de WordPress primero, inicie sesión en el panel de administrador de WordPress con el nombre de usuario y la contraseña que ha configurado. Elija la página / publicación en la que desea colocar el video y presione “Editar”. El código de incorporación es una pieza de código HTML que puede agregar a su sitio web para que el contenido que desee proporcionar a sus lectores. (Video) se muestra en la página.

Aquí hay un ejemplo de un código de incorporación en YouTube. Haga clic en el video y se mostrará un panel con las opciones de arriba. Haga clic para copiar el código de incorporación y luego péguelo en su página.
También puede ir debajo del video y seleccionar “Compartir”. Verá algunas opciones allí, como Facebook, WhatsApp, etc. Ahora estamos interesados ​​en la opción “Incorporación”.

Aquí también tiene la opción de seleccionar el momento en que inicie el video, porque es posible que solo desee resaltar un cierto momento dentro de él. Ahora el código de incorporación tiene el siguiente formulario:


Lo que es maravilloso es que puede ajustar el tamaño del video, solo intente reproducir con los valores para el ancho o el tamaño. Aquí hay un ejemplo de un código de incorporación de Vimeo. Si pasa con el mouse sobre el lado derecho de un video, verá algunos íconos. Seleccione el que le permita compartir el video. Aquí tiene el código de incorporación. A continuación también verá algunas opciones. Si los marca, el código cambiará.
Copie el código de incorporación. Ahora, para pegarlo, tendremos que pasar del editor visual al texto.

Ahora verá el código HTML detrás de su página o publicación. Inserte su código aquí ahora, puede ser un poco difícil entender exactamente dónde hacer esto. Puede usar CTRL F para identificar una cierta frase y luego desea colocar el video. Puede obtener una vista previa de su video cuando regrese al editor “visual”. Si no parece estar bien, colóquelo en otro lugar.

Si todavía no parece estar bien, tenemos algunas opciones más fáciles presentadas a continuación. Esta opción de código construida es buena cuando desea realizar cambios en el tamaño del video, como se muestra arriba. De lo contrario, puede omitir los capítulos sobre “ingresar videos desde una fuente externa con un enlace, en lugar del código de incorporación (modo simple)”. Incorpore videos en páginas o publicaciones de blog de una fuente externa en el editor de WordPress predeterminado para el proceso de obtener el código de incorporación, puede verificar el capítulo anterior. Entonces ahora tiene el código requerido. ¿Qué debes hacer con él? Formar el tablero de WordPress, abrir la página o publicación deseada. Simplemente pegue el código aquí.

Insertar los videos desde una fuente externa con un enlace, en lugar del código de incorporación (modo simple) en el editor clásico, comience abriendo la publicación o página deseada. Ahora tú puedes:
Pega tu URL de video.
Acceda a agregar medios -> Insertar en la URL y pegar la URL.

Con esta opción, no puede ajustar el tamaño del video.
Insertando los videos desde una fuente externa con un enlace, en lugar del código de incorporación (modo fácil) en el editor predeterminado en el editor de Gutenberg, solo tiene que copiar URLNK en el video a un nuevo bloque vacío. WordPress se hará cargo del código de incorporación, y los archivos de video se mostrarán en la página:
También tiene los siguientes bloques para insertar videos:
Video: puede seleccionar la opción “Insertar de URL” aquí.

Youtube

Vimeo
Ahora que ha insertado su video, puede hacer algunos cambios si tiene un conocimiento HTML mínimo. Todo lo que tiene que hacer es seleccionar el video y hacer clic en los tres puntos alineados verticalmente sobre el video. Seleccione la opción “Editar como html”. El video de arriba también le permitirá:


Alinee el video a la izquierda, en el centro o derecha;
Editar URL del archivo de video: puede reemplazar el video con otro archivo seleccionado, cada vez que abre el editor;
Duplicar el video;


Ingrese un nuevo bloque antes del video;
Ingrese un nuevo bloque por video;
Agregue el video a bloques reutilizables y reintroduce a otra publicación o página.
Insertando los videos alojados localmente en WordPress Now, que sabemos cómo incorporar videos en WordPress de fuentes externas, es hora de ver cómo podemos usar los alojados localmente. Para esto, trabajaremos con la biblioteca de medios. Puedes comenzar a ir allí desde el tablero de WordPress. Cuando trabajo con materiales de cualquier tipo, me gusta cargarlo en el bloque y, solo para seleccionarlo desde allí, siempre que quiera colocar un video o imagen en una página o publicación.
Cuando accede a “agregarnos”, puede cargar o deslizar y colocar los archivos deseados.
Ahora que los archivos están activos, agregamos.
Insertar videos alojados localmente en WordPress Classic Editor es el momento de acceder a una página o publicación. Coloque el cursor donde desee insertar el video. Luego, vaya al “Agregar contenido multimedia” cerca del menú superior. Si ha cargado previamente sus medios, encontrará su archivo aquí, generalmente llamo a mis archivos con nombres relevantes, por lo que puedo encontrarlos fácilmente. Puede ver el contenido de los medios después del tipo o fecha, pero también busque por nombre. Simplemente seleccione el archivo necesario y se agregará a su página insertando los videos localmente alojados en el editor predeterminado de WordPress que mencioné en un capítulo anterior que hay un bloque llamado “video” disponible en el panel de bloques. Vaya al letrero “+” en la parte superior izquierda y abra el panel de bloque. Busque el bloque “Video”. Seleccionarlo.
Ahora, puede cargar su propio video o seleccionar “Biblioteca de medios”. Ahora puede elegir un video de los que ya están cargados.

¡Y eso fue todo! Agregar videos a WordPress usando Customizer para asumir que es posible que desee cargar un archivo de video para configurarlo como páginas interiores de fondo / héroe. Si tiene un tema flexible, puede hacerlo en Customizer. Puede acceder a él desde la apariencia -> Personalización. Así es como puede hacer esto con Mesmeris, un tema que tiene más opciones y una mayor flexibilidad de personalización:

Abrir personalizador. Vaya a Hero -> Páginas de primera página / Hero.
Vaya a la subsección de fondo -> Tipo de fondo. Luego seleccione el video como tipo de fondo que desea configurar para su página de héroe.

En la lista de opciones para este tipo de antecedentes, debe hacer clic en Video Seleccionar para cargar un video de sí mismo en el fondo de la página: también recomendamos incluir un archivo de video en su página inicial / Héroe de páginas interiores. Esto agregará un cierto dinamismo a la presentación, capturando efectivamente la atención de los usuarios. Mantenemos el ejemplo de Mesmeris.

Abrir personalizador. Acceda al héroe desde la primera página / héroe en las páginas interiores.

Acceda a la subsección de contenido -> aspecto de contenido. Luego seleccione texto con soporte de medios que se mostrará en la página Hero.
En este tema, en particular, tiene las opciones para seleccionar:
Texto con soporte de medios a la izquierda;
Algunos textos con contenido multimedia a la derecha;

Texto con soporte de arriba;
Texto con contenido multimedia a continuación.
Asegúrese de que el tipo de soporte de medios esté configurado en el video. Para el contenido de video como página, solo tiene la opción de proporcionar un enlace a una fuente de video externa. Esto es por razones de rendimiento óptimas (ver en la siguiente sección). Desde la sección dedicada, la configuración del cuadro de medios, puede hacer personalizaciones para el archivo de video:


Alineación vertical del video
Reproducción de video automático (cuando los usuarios abran la página, el video comenzará a reproducirse automáticamente)
Deshabilite el video (cuando los usuarios abren la página y comienzan a ver el video, el sonido se deshabilita automáticamente)
Video Loop (cuando los usuarios abren la página, el video comienza a reproducirse; una vez que termina el video, comience a reproducirse nuevamente, en el bucle).
Es mejor usar videos alojados externamente en lugar de videos autohostados. Este es el por qué. Es la mejor práctica para usar videos alojados externamente. Es por eso: los videos alojados automáticamente afectan la velocidad de carga de la página, que es una desventaja importante en el rendimiento del sitio
Videos alojados externos ayudan a mantener los recursos del servidor a un nivel óptimo
Los videos alojados automáticamente, debido a la baja velocidad de la página, son una mala experiencia del usuario.
Después de haber agregado el video, es hora de optimizar. Enumeré a continuación algunas funciones y características que debe considerar, para optimizar los videos y el rendimiento mejorado del sitio web:
Active la carga perezosa: esta característica se refiere a cargar el video cuando sea necesario y no instantáneamente durante la apertura de la página. Esto da como resultado el aumento de la velocidad de carga de la página.
Videos que responden a dispositivos móviles: esto le permite mostrar videos de manera óptima cuando los dispositivos móviles (muebles y tabletas).

Reproducción automática: esta es una característica que permite que un video inicie la reproducción automática, cuando los usuarios abren una página.
Bucle: el archivo de video está configurado para reproducirse en el bucle. Esto significa que una vez que el archivo de video ha terminado, comienza a volver nuevamente.
Desactivación de video: cuando el video comienza la reproducción, el sonido está deshabilitado;Esto significa que el elemento de video no evitará que los usuarios navegen por la página.Si quieren prestar especial atención al video, tienen la opción de activarlo.Abra el video en Lightbox: cuando los usuarios hacen clic en el elemento de video en una página, el video se abrirá en un cuadro de caja de luz y comenzará a reproducirse.Una vez que se ha visto el video, los usuarios simplemente cierran la ventana de la caja de luz y continúan navegando por la página.Ahora que ha aprendido a incorporar videos en WordPress, es hora de insertar videos en su sitio web.¡Feliz personalización!