# SharePoint Autoplay & Hover Video Player Web Part

**URL:** <https://community.origamiconnect.com/t/sharepoint-autoplay-hover-video-player-web-part/872>\
**Category:** How-Tos & Manuals for Origami Connect\
**Created:** [February 7, 2025, 4:26pm UTC](https://community.origamiconnect.com/t/sharepoint-autoplay-hover-video-player-web-part/872 "2025-02-07T16:26:31Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![origami](https://yyz1.discourse-cdn.com/flex031/user_avatar/community.origamiconnect.com/origami/32/436_2.png) [@origami](https://community.origamiconnect.com/u/origami)\
**Post date:** [February 7, 2025, 4:26pm UTC](https://community.origamiconnect.com/t/sharepoint-autoplay-hover-video-player-web-part/872/1 "2025-02-07T16:26:31Z")

</div>

> 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  
 ](https://www.loom.com/share/26372694ae444df1a658a742f3b59f15)[![](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/3/35b8d31b5314e807fac59ca74ec9b3df2cfbb80c.gif)](https://www.loom.com/share/26372694ae444df1a658a742f3b59f15)

On the page where you need the video, add this web part:  
 ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/e/e438d8c317bf197d4da2e0268baa81a92aa07d22.png)

> **Uploading videos (less than 10Mb)**
>
> Smaller videos can be uploaded from web part properties as shown below:
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/4/4af1444c358312789be22a7d2a14ad37ff0e11ce.png)
> 
> 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](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/2/2357a00553c43524b390c52d2dc6c710b7822a37.png)
> 
> 3. In the top right hand corner, click **Share** → **Embed Code** , as shown below  
> 
> 4. Click the **Copy embed code** button as shown below  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/4/4bdadf78033e2da48cb957efe5c68a19c4b440eb.png)
> 
> 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:  
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/0/0c7263f81ac931971ab864e399858edff3b2aa66.jpeg)

> **Styling options**
>
> You can change the dimensions of the video and how rounded is the video border using these options:
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/a/a372824f68328bea8e3e444bcecef0ed063f2594.png)

> **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!
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/f/fea7e4fb5cc23856c523e21871e64f0332e72b34.jpeg)
> 
> Here is how to set this up from web part properties:
> 
> ![image](https://canada1.discourse-cdn.com/flex031/uploads/origamiconnect/original/2X/e/e1a3da47b28f842d887451c883ae149b99bd6481.png)