Add autoplay Youtube video in content page
In this article:
Add YouTube video in content page
Make video auto-play
Remove zoom effect for video (For X-FORCE theme only)
Resize video section (For Candy theme)
Resize video section (For X-FORCE theme)
📌 Note : Before you begin, kindly take note on the Autoplay policy changes
1. Add YouTube video in content page
Step 1 : Go to EasyStore Admin > 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
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
Updated on: 15/03/2024
Thank you!