This document addresses the challenges faced by Korean users learning Framer due to a lack of resources in Korean by translating the content from the official blog into Korean and adding practical information useful for work. We hope this will be a small help to all of you using Framer.

How to Add a Video Component

1. Click the [+] Insert button in the top menu

2. Move to the Media section

3. Drag the desired video component onto the canvas

The available components include the basic Video component, YouTube component, and Vimeo component. The options you can set will vary depending on which component you choose.

Detailed Settings for the Video Component

After inserting a video in Framer, you can adjust various properties in the right panel to configure it as desired. Each item directly impacts the actual user experience, so it's important to understand what each setting means and use them accordingly.

• Source

  Select the Upload tab then click the Choose File button to upload a video directly from your local files. Formats like .mp4 and .webm are commonly used. If you want to use an external URL, select the URL tab. Simply enter a YouTube or Vimeo video URL and the video will embed automatically without any coding. A preview thumbnail is also automatically generated for convenience.

• Playing

  Set to Yes to have the video automatically play as soon as the component is rendered, or to No if playback should wait for the user to press the play button.
  Note: Mute settings are mandatory for autoplay.

• Radius

  This option allows you to round the corners of the video.
  You can enter a number or press the rightmost icon to round all the corners or specific corners only.

• Poster

  Select Yes to add a thumbnail to be shown before the video plays. Use the Image > Upload button to insert your chosen image. The poster image should be at least 60 x 30 pixels.
  Note: Thumbnails are beneficial for search engine optimization (SEO).

• Background

  Specify the background color to appear in the empty spaces around the video.

• Start Time

  You can specify the starting point of the video as a percentage.
  (For instance: setting it to 10% makes the video start from the 10% mark.)

  
  

• Loop

  Setting to Yes makes the video automatically restart after it finishes.
  This can be used for short demo videos or videos with repetitive effects.

  
  

• Fit

  Defines how the video will fit within the component area.

• Controls

  Select Show to display controls like play/pause buttons and timeline.
  Hide conceals the video control interface, preventing user interactions with the video.

  
  

• Muted

  The Muted option must be set to ‘Yes’ to enable autoplay, so if sound is necessary, set video controllers to ‘Show’ to let users opt-in manually.

YouTube Component Setup Guide

In Framer, embedding a video is as simple as entering a YouTube link. Besides basic settings, you can adjust autoplay, thumbnail quality, button colors, and more to customize according to different needs.

• Video

  This is for entering the URL of the YouTube video. Supports formats like https://youtu.be/... or https://www.youtube.com/watch?v=....

  
  

• Autoplay

  Off: Default setting. The video starts when the user plays it.
  On: The video plays automatically when the page loads.
  However, Mute must be activated for this to be allowed in most browsers.
  Note: Framer’s integration properties for YouTube are limited to URLs only, and features like Add Fetch are restricted.

  
  

• Thumbnail

  Thumbnails are used for performance optimization and display a preview image to users before the video loads.
  Options: Low Quality, Medium Quality (default), High Quality, Off
Note: Setting thumbnails is beneficial for optimizing pages where performance is crucial.

  
  

• Color

  Select the color theme for the YouTube player interface.
  Options: Red(default YouTube theme), White(light interface theme)

Vimeo Component Setup Guide

Vimeo is frequently used for high-quality video content or design-centric portfolio sites. Framer allows easy embedding with just a Vimeo URL, and you can further fine-tune playback options.

• URL

  Where you enter your Vimeo video link.
  Example: https://vimeo.com/123456789

  
  

• Controls

  Show: Displays Vimeo controls like play/pause, volume, and fullscreen.
  Hide: Only shows the video for a clean visual, beneficial for portfolios or art showcases where focus should be on visuals.

  
  

• Autoplay

  Yes: The video auto-plays once the page loads. However, Mute must be enabled for most browsers to allow this.
  No: The user has to play the video manually.

Autoplay Considerations

Most modern browsers, like Chrome and Safari, block autoplay for videos with sound. Hence, you must enable the Muted option when setting autoplay. For videos where sound is needed, it's best to have them play following explicit user interaction, like a click.

Note: It's possible to set autoplay for when the video enters the viewport. Go to Framer's Official Guide

Video Accessibility Considerations

If the video does not have audio, providing a simple text description beneath the video can benefit hearing-impaired users or those browsing with the sound off on your website.

Note: Check out this guideline for practical accessibility examples.

This post is a translated and adapted content of Framer's official blog ‘Adding videos’.