Video (on-hover, autoplay)

Create beautiful page interaction with on-hover and autoplay video web part.

Key features:

  • Works with any section: flexible section, full-width etc
  • Can autoplay on hover (use videos as dynamic buttons!)
  • Supports Stream, YouTube, other embeds, and custom uploads
  • Supports custom thumbnails
  • Mute it, loop it, and resize it
  • Customize video-click behavior


Video web part - Watch Video

On the page where you need the video, add this web part:
image

Uploading videos (less than 10Mb)

Smaller videos can be uploaded from web part properties as shown below:

Your videos will be automatically placed in Site Assets library in folder called Videos

Uploading large videos (over 10Mb)

If you need to upload a large video, follow these steps:

  1. Upload your video to a SharePoint document library directly

  2. Open the video which should open in Stream
    image

  3. In the top right hand corner, click ShareEmbed Code, as shown below

  4. Click the Copy embed code button as shown below
    image

  5. Now, go to the Video web part where you placed it, and access web part properties

  6. Paste the embed code in the Link to video or embed code textbox, as shown below

  7. Save the page

Playback options

Playback options are in Video Playback web part properties section and include these options:

  • Autoplay - plays video as soon as the page is loaded
  • Loop - starts playing video again as soon as it’s finished
  • Muted - video plays without sound
  • Play on a hover - video is paused and plays when the mouse hover over it, paused again when mouse is out. This option is great for creating animated buttons as shown below:
Styling options

You can change the dimensions of the video and how rounded is the video border using these options:

Customize video-click behavior

You can make it so when the video is clicked on, the user is redirected to a custom URL.
This way, your videos can become clickable buttons!

Here is how to set this up from web part properties: