> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://support.easystore.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Add autoplay Youtube video in content page

###### In this article:
1.  Add YouTube video in content page    
2.  Make video auto-play    
3.  Remove zoom effect for video (For **X-FORCE** theme only)    
4.  Resize video section (For **Candy** theme)    
5.  Resize video section (For **X-FORCE** theme)    

|| **📌 Note :** Before you begin, kindly take note on the [Autoplay policy changes](https://developers.google.com/web/updates/2017/09/autoplay-policy-changes)  

## 1. Add YouTube video in content page

**Step 1 :** Go to [EasyStore Admin](https://admin.easystore.co) > Channels > Online Store > Pages > Add page > select desired template > click on **Videos** icon

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/untitled-design-45_1ne863q.jpg)

**Step 2 :** Paste your YouTube video URL > Confirm > Save

![](https://storage.crisp.chat/users/helpdesk/website/5c6d91083e455400/960fb182-d795-42c5-840c-9a3112_ifmvrc.png)

| 💡Tips: You can also add **YouTube short video** by converting the video link from:

** _This format_ **
`https://youtube.com/shorts/ ... ?feature=share`

** _Into this format_ **
`https://www.youtube.com/watch?v= ...`

|| **Remark:** "..." is the video handle

For example, the video link should be:
_ [https://www.youtube.com/watch?v=XbUBCpMYWiY](https://www.youtube.com/watch?v=XbUBCpMYWiY) _
---
## 2. Make video auto-play

**Step 1 :** Click on **Code View**.

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/untitled-design-46_hpwaqs.jpg)

**Step 2 :** Under **src** > replace **?fs=1** with `?autoplay=1&mute=1`

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/screenshot-2024-03-15-at-14332_ttdih0.png)


**Step 3 :** Once done, click on **Code View** again to back to normal view > Save and done
---
## 3. Remove zoom effect for video (X-FORCE theme only)

**Step 1 :** Go to Channels > Online Store > Edit Source > select **theme.scss** file

**Step 2** : find **.video-wrapper** and change all percentage to **100%** for **width** & **height**

![](https://storage.crisp.chat/users/helpdesk/website/61f5ba7878b16800/41bb3b42-76b7-42ff-abc2-0416e8_1ytee7j.png)

![](https://storage.crisp.chat/users/helpdesk/website/d79c403984810800/37519774-d7dc-4705-b7cd-e5dfed_d76vum.png)

**Step 3 :** Save
---
## 4. Resize video section (For Candy theme only)

**Step 1 :** Go to Channels > Online Store > Edit Source > select **theme.scss** file

**Step 2 :** Add the code below at the bottom of **theme.scss** file and change the max-width px

``` div#es_video_section {max-width: 1000px;margin: 0 auto;}```

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/untitled-design-48_1fjgo9b.jpg)

**Step 3 :** Save

### Before (full-width) :

![](https://storage.crisp.chat/users/helpdesk/website/53dde7cc7547e000/76b23a42-0c02-4c64-aaff-374506_1awzofu.png)

### After (900px) :

![](https://storage.crisp.chat/users/helpdesk/website/943c79e470b3780/a57a81d0-a98f-4839-b0bb-20a38e_10hclwc.png)
---
## 5. Resize video section (For X-FORCE theme)

**Step 1 :** Go to Channels > Online Store > Edit Source > select **theme.scss** file

**Step 2 :** Look for **.home-video-wrapper{ around** line 1900+ and change the **width** & **height**

![](https://storage.crisp.chat/users/helpdesk/website/b34797d9594d3000/untitled-design-49_1dcidus.jpg)

**Step 3 :** Save