Cómo incrustar el reproductor VancastVideo en tu propia página

Modificado el Fri, 31 Mar 2023 a las 09:21 AM

Resumen: Aunque no es necesario que lo hagas, ya que Vancast Video te proporciona una página alojada completa por evento, es posible que necesites integrar el reproductor en tu propia página.


Importante!
Solo estos tipos de enlaces de acceso son adecuados para incrustar el reproductor en su página
  • Open Access
  • Single Sign On Access

Sigue los siguiente pasos

1. Crea un Link de acceso

Para incrustar el reproductor debe crear un enlace de los tipos mencionados anteriormente.

  1. Pase el cursor sobre el menú lateral de la página de Event Management y haz clic en Access Links
  2. Haz clic enpara añadir un nuevo Access Link
  3. En la ventana modal que se abre, escribe una Description útil
  4. Escoge un Access type de tipo Open 
  5. Haz clic enpara habiltar el enlace
  6. Haz clic en Create
  7. Obtén la URL para incrustar en tu página; Haz clic en la caja que representa el link para abrir sus propiedades Utilizael botónpara copiar el Webcast Player embed code al portapapeles de tu equipo.

2. Pega el código iframe que copiaste al portapapeles en tu código HTML.

<iframe src="https://yoursubdomain.vancastvideo.com/event/XHASHXXX/8888/embed?lang=9999" frameborder="0" allowfullscreen=""></iframe>

3. Agrega un selector Id o de clase a la etiqueta iframe para que puedas escribir los estilos CSS para ese Id o clase (en nuestro ejemplo id="video-streaming")

<iframe id="video-streaming" src="https://yoursubdomain.vancastvideo.com/event/XHASHXXX/8888/embed?lang=9999" frameborder="0" allowfullscreen=""></iframe>

4. Agrega los estilos para el selector Id="video-streaming"

Si configuras un ancho para el iframe en tu página, debes considerar la proporción 16:9 del reproductor de video.

En nuestro ejemplo, hemos configurado un ancho del 60 % del ancho del "viewport". Por lo tanto, la altura también debe ser 60 x 9/16 del ancho del "viewport". Por lo tanto, el 33,75% del ancho del "viewport".

#video-streaming {   
width: 60vw;
height: 33.75vw;
margin: 0 auto 0px;
padding: 0 0 40px;
display: block;
}

El código anterior es tan solo un ejemplo del tipo de código que necesitas para incrustar un reproductor de video en tu página.

¿Le ha sido útil este artículo?

¡Qué bien!

Gracias por sus comentarios

¡Sentimos mucho no haber sido de ayuda!

Gracias por sus comentarios

¡Háganos saber cómo podemos mejorar este artículo!

Seleccione al menos una de las razones

Sus comentarios se han enviado

Agradecemos su esfuerzo e intentaremos corregir el artículo