Web Design

How to Plan, Shoot, Edit and Embed Video on Your Website

Follow this step-by-step guide to plan, shoot, edit and embed video on your website.

A woman eating dessert with an SLR camera on the table.

If a picture’s worth 1,000 words — imagine what video could do for your website!

Imagine a behind-the-scenes video of an executive chef preparing his signature dish. Imagine a background video that takes visitors on a tour of a restaurant. Imagine several table-side testimonials from satisfied customers. There are endless creative possibilities you could achieve with video on your website.

In this post, I'm going to share how to plan, shoot, edit and embed video on your website.

1. Outline Your Goals and Strategy

Knowing what you want to achieve with video on your website is important. Embedding video for the sake of having video is pointless and will just annoy users. Here are some questions to answer before moving forward:

  • What are your goals for using video?
  • Will video improve your website's marketing story?
  • How will video help convert visitors into customers?
  • What will video reveal about your business?
  • How many videos do you want to use?
  • What web page(s) do you want to embed video?

2. Decide Who's Going to Shoot the Video

Snappr's homepage with instructions for hiring a professional photographer.

Who's going to shoot the video? Are you going to hire a professional? Use stock video? Do it yourself?

Hire a Professional Photographer

You could find a professional photographer by searching photographer organizations, then filter by location and specialty. Here are some professional organizations:

You could also find a professional photographer by Googling "professional photographer [your city]" or using an online marketplace like the following:

For more help choosing a photographer, read How to Find and Work with a Professional Photographer.

Use Stock Video

I'd advise against using stock video for your website unless it's used for aesthetic purposes like muted background video with filters, overlay colors and fonts that matches your branding. Also, if you choose to use stock video, ensure it has smooth transitions and loops seamlessly.

Here are some popular stock video websites:

DIY Video Production

If you're confident that you or a team member can produce a high-quality video for your website, then do it yourself. Caleb Wojcik's DIY Video Production Guide and Vimeo Video School are both great resources to learn how to shoot, edit and create videos yourself.

3. Storyboard the Video

A storyboard template from studio binder

Use a storyboard template like the one above from studiobinder (see image) to represent the scenes and shots of your video. Communicate your ideas with stakeholders and ensure everyone agrees on the direction and storyboard.

4. Shoot the Video

If you've decided to shoot the video yourself, then you'll want to use a 4K camera or a modern smartphone (e.g. iPhone 11 Pro) to shoot high-quality video.

Here are some tips for shooting video:

  • Shoot video horizontally, not vertically
  • Avoid videos over 40 seconds
  • Avoid quick cuts and excessive panning
  • Avoid large files that increase load times or midstream pauses

5. Choose Your Video Editing Software

Apples web page for iMovie.

If you're new to video editing, then iMovie or ScreenFlow might be the easiest to learn. If you're unfamiliar with video editing software, sign up for a free trial of LinkedIn Learning or SkillShare. In a matter of hours, you'll be comfortable editing video.

Here's some popular video editing software:

6. Choose Your Video Hosting Site

Vimeo's privacy settings page.

Most website builders like Webflow and Squarespace require videos to be hosted by third party sites, such as the following:

You may also want to enable privacy settings for the video. For example, on Vimeo, you can list specific domains where the video can be embedded (see image). This prevents others from embedding the video elsewhere.

7. Embed the Video on Your Website

Copy the video's URL from the video hosting site in Step 6 and paste it inside your website's video element, then publish your website. For more a visual guide, watch Webflow's guide for adding video to a website above.

Next, open your website in another web browser tab to check the video is loading correctly. Then, check the video on tablet and mobile to ensure the video's loading correctly on those devices too.

Finally, monitor the number of views of your video on the hosting site (e.g. Vimeo) to ensure that it's adding value to your website and converting visitors into customers.

Wrap Up

You just learned how to plan, shoot, edit and embed video on your website. Remember, if a picture’s worth 1,000 words – imagine what video could do for your website!

How to Plan, Shoot, Edit and Embed Video on Your Website first appeared on the Bento Sites Blog by Jeff Shibasaki.

Close-up of Jeff Shibasaki wearing a black hat.

Jeff Shibasaki

I’m an Atlanta web designer that specializes in website design and development on Webflow and Squarespace.

Get exclusive design and marketing tips.