Add a Video to a UXi® Site – Marketing 360®

The UXi® Video widget can be used for embedding standard YouTube or Vimeo videos. However, these platforms differ greatly in the way they implement more advanced options like custom branding, video looping, and autoplay. To embed videos with options not available in the standard video widget, use the UXi® Embed widget. For code samples and a full list of the parameters available from each platform, see the options below.

Add a Video or Embed Widget

To add a Video widget, navigate to the Front End Editor, then click on the + icon on any empty block. On the pop-up that appears, click on Media to expand the section, then select Video.

Screen_Shot_2021-07-29_at_4.47.46_PM.png

To add an Embed widget, navigate to the Front End Editor, then click on the + icon on any empty block. On the pop-up that appears, click on Content to expand the section, then select Embed.

Screen_Shot_2021-07-29_at_4.51.22_PM.png

YouTube

YouTube example with 16 x 9 (widescreen aspect) and autoplay:

<div class="flex-embed youtube _16by9">
<iframe src="//www.youtube.com/embed/RH3i7qONrT4?autoplay=1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

For more YouTube parameters for options like removing video controls, looping the video, and more, see the full list here

https://developers.google.com/youtube/player_parameters#Parameters

Vimeo

Vimeo example with 16 x 9 (widescreen aspect) and autoplay:

<div class="flex-embed vimeo _16by9">
<iframe src="//player.vimeo.com/video/100902001?autoplay=1" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>

For more Vimeo parameters for options like removing video controls, looping the video, and more, see the full list here

https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters

Adding Autoplay Functionality to Videos

Many of the leading browsers on the web have moved towards stricter policies when it comes to auto-playing media. Chrome, Safari, and Firefox have all taken steps to stop audio and videos from auto-playing by default unless very specific criteria have been met. Their goals for doing so include:

Improving the user experience
Minimizing incentives to install ad blockers
Reducing data consumption on expensive and/or constrained networks.
Giving greater control of playback to users and to benefit publishers with legitimate use cases.

Fore more specific info from each of the browsers listed above, see the following articles:

https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/

https://support.mozilla.org/en-US/kb/block-autoplay

Each video platform gives you the option to copy / paste an iFrame code, though they will not be responsive on mobile devices. To embed a video iFrame that'll fit any device, use the code examples below. When pasting the iFrame code, you can remove the width="" and height="" parameters. The 'flex embed' div wrapping the iFrame will display the video full-width in its column, displaying perfectly on any device size!