Se pueden añadir vídeos a los flujos móviles mediante el bloque de contenido de vídeo. Este bloque permite tomar un vídeo de una fuente existente, como Wistia , YouTube , Vimeo u otro servicio de alojamiento, e incrustarlo en un flujo móvil.
Si busca instrucciones sobre flujos web, consulte Incrustar un video en un flujo .

Cómo agregar vídeos

Al crear un flujo móvil, añade o selecciona el paso. Con ese paso seleccionado, coloca el cursor sobre el área donde quieres añadir el bloque de vídeo y selecciona el botón verde +.
Se mostrará el selector de bloques de contenido, seleccione la opción de video.
Se agregará un nuevo bloque de video en el área seleccionada con un video predeterminado.
Selecciona el nuevo bloque de video. En la barra lateral encontrarás la sección "Código de inserción" con el código del video de ejemplo. Reemplaza el código de inserción de muestra por el de tu video, ajusta el espaciado según sea necesario y ¡listo!

Wistia

https://wistia.com/support/embed-and-share/media-on-your-website

• En Wistia, selecciona el vídeo que deseas incrustar.
• Seleccione Incrustar y compartir . Se debe seleccionar Incrustar en línea y habrá una opción para ajustar la configuración según sea necesario.
• Copie el código de la sección Código para insertar .
• Vaya al bloque de video en el que está trabajando actualmente en Appcues Mobile Builder y pegue el código en la sección Código para incrustar .

Muestra

<guión src="https://fast.wistia.com/embed/medias/qjd52litzy.jsonp" asíncrono></script><script src="https://fast.wistia.com/assets/external/E-v1.js" asíncrono></script><div estilo="relleno:56.25% 0 0 0;posición:relativa;"><div estilo="altura:100%;izquierda:0;posición:absoluta;superior:0;ancho:100%;"><div estilo="altura:100%;posición:relativa;ancho:100%"><div estilo="altura:100%;izquierda:0;opacidad:0;desbordamiento:oculto;posición:absoluta;arriba:0;transición:opacidad 200ms;ancho:100%;"><img src="https://fast.wistia.com/embed/medias/qjd52litzy/swatch" estilo="filtro:desenfoque(5px);alto:100%;ajuste-del-objeto:contiene;ancho:100%;" alt="" aria-hidden="verdadero" onload="este.parentNode.style.opacity=1;" /></div></div></div></div>

YouTube

https://support.google.com/youtube/answer/171780?hl=es

Con YouTube usaremos una opción personalizada para que tengas algunos controles más sobre el comportamiento.

• En YouTube, navega hasta el flujo que quieras utilizar.
• Selecciona Compartir y se mostrará una URL como ' https://youtu.be/EXfcMeYp1_I' , en este caso 'EXfcMeYp1_I' será tu ID de video.
• Vaya a Appcues y seleccione el bloque de video en el que está trabajando y copie el código de muestra a continuación en la sección Código para incrustar .
• Reemplace {{yourVideoID}} en el código de muestra con el ID del video de YouTube.
• Las variables de reproductor definidas en el script a continuación (línea 13) se pueden personalizar para controlar diferentes aspectos de la presentación del video, como la reproducción automática, la pin y la visibilidad de los controles del reproductor. Consulta https://developers.google.com/youtube/player_parameters#Parameters para obtener más información sobre las opciones compatibles.

Muestra

<división id="jugador"></div>
<guión>
 variedad etiqueta = documento.createElement('script');
 etiqueta.src = "https://www.youtube.com/iframe_api";
 variedad firstScriptTag = documento.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(etiqueta, primerScriptTag);
 variedad jugador;
 función enYouTubeIframeAPIReady() {
 jugador = nuevo YT.Player('jugador', {
 ancho: '100%',
 altura: '100%',
 IDdelvídeo: '{{tuIDdeVideo}}',
 variablesdeljugador: { 'reproducciónautomática': 1, 'jugarenlínea': 1, 'bucle': 1, 'controles': 0, 'mostrarinformación': 0 },
 eventos: {
 'Listo': enPlayerReady,
 'alcambiodeestado': onPlayerStateChange
 }
 });
 }
 función onPlayerReady(evento) {
 evento.objetivo.playVideo();
 }
 función onPlayerStateChange(evento) {
 si (evento.datos === YT.PlayerState.FINALIZADO) {
 reproductor.playVideo();
 }
 }
</script>

Vimeo

https://vimeo.com/blog/post/como-incrustar-videos/

• En Vimeo, navega hasta el video que deseas compartir.
• Seleccione el icono Compartir , seleccione el icono Incrustar y haga clic en el botón Copiar .
• Vaya a Appcues y seleccione el bloque de video con el que está trabajando y pegue el código copiado en la sección Código para incrustar .

Muestra

 <división estilo="relleno:56% 0 0 0;posición:relativa;">
 <iframe Fuente:https://player.vimeo.com/video/755133283?h=a09367476d&badge=0&autopause=0&player_id=0&app_id=58479 ancho="100%" altura="100%" bordedelmarco="0" permitir="reproducciónautomática; pantallacompleta; "imagenenimagen" permitirpantallacompleta estilo="posición:absoluta;superior:0;izquierda:0;ancho:100%;alto:100%;" título="Cómo a construir móvil aplicación incorporación flujos sin código con Sam Sinatascos.mp4"></iframe>
 </div><script src="https://player.vimeo.com/api/player.js" ancho="100%" altura="100%"></script>