Skip to main content

Adding Videos to Your Site

Guide for adding and configuring a videos on your CraftedStays website.

Gil Chan avatar
Written by Gil Chan
Updated over a week ago

Overview

CraftedStays lets you seamlessly add videos in specific areas of your site. This guide explains what's supported and workarounds for additional video needs.

Supported Video Features

Homepage Hero Background Video

You can add a video as your hero section background:

Where: Hero section on homepage (and other pages with hero) Specifications:

  • Max file size: 150MB

  • Format: MP4 recommended

  • Duration: 10-30 seconds (loops automatically)

  • Resolution: 1080p (1920×1080)

  • Audio: Muted (videos play without sound)

How to add:

  1. Go to Template Editor

  2. Select the Hero section

  3. Look for Background Video field

  4. Upload your video file

  5. Add a Background Image as fallback (displays while loading or if video fails)

  6. Save changes

Property-Specific Videos

Native support: Not currently available

Property pages don't have a built-in video feature. However, you can work around this:

Workaround: YouTube/Vimeo Embed

For property videos, create a custom landing page:

  1. Upload your video to YouTube or Vimeo

  2. Create a custom page for the property

  3. Add an HTML block with the embed code:

<div style="text-align: center; margin: 20px 0;"><iframewidth="560"height="315"src="https://www.youtube.com/embed/YOUR_VIDEO_ID"frameborder="0"allowfullscreen></iframe></div>

4. Link to this page from your property description or menu
​


Note: We recommend enabling "Don't Sync" when using this approach to prevent your PMS from overwriting the code with the Property Description.
​
In your Live Site, it should look like this
​


​

Embedding Videos with HTML Blocks

You can add videos anywhere using HTML blocks:
​

YouTube Embed

<iframewidth="560"height="315"src="https://www.youtube.com/embed/VIDEO_ID"frameborder="0"allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"allowfullscreen></iframe>


Vimeo Embed

<iframesrc="https://player.vimeo.com/video/VIDEO_ID"width="640"height="360"frameborder="0"allowfullscreen></iframe>


Responsive Video Container

For videos that resize on mobile:

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;"><iframesrc="https://www.youtube.com/embed/VIDEO_ID"style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"frameborder="0"allowfullscreen></iframe></div>


Video Best Practices

For Hero Background Videos

  • Keep it short (10-30 seconds)

  • Subtle motion works best (avoid fast cuts)

  • Compress the file to reduce loading time

  • Always add a fallback image

  • No audio - videos auto-mute anyway

For YouTube/Vimeo Embeds

  • Host on YouTube or Vimeo instead of self-hosting

  • Use unlisted if you don't want the video public on YouTube

  • Start with thumbnail - don't auto-play embedded videos


Video File Compression

If your video is too large:

  1. Use video compression tools:

  1. Reduce resolution (1080p is sufficient)

  2. Lower bitrate

  3. Trim unnecessary footage


Feature Requests

Want native property video support?

  • This is a feature request many users have submitted

  • Contact support to add your vote

  • Custom development may be available


Troubleshooting

Video not playing

  1. Check file size (max 150MB for hero)

  2. Verify MP4 format

  3. Test the video file locally

  4. Check fallback image is loading

Video loads slowly

  1. Compress the video file

  2. Reduce resolution

  3. Keep duration short

YouTube embed not working

  1. Check the video ID is correct

  2. Make sure video isn't private (use unlisted)

  3. Verify embed code is complete

Video looks cut off on mobile

  1. Use responsive embed code (see above)

  2. Test on mobile devices

  3. Consider different aspect ratios

Related Articles

Did this answer your question?