Tutorial

How To Add Audio & Video in Framer

In this Framer tutorial, we show you how to add video and audio to your site either from a third party, like YouTube, or a self-hosted media.

Adding videos and audio files to your site help enrich the user experience. They are also a great way to relay information that would otherwise be hard to explain with just text.

Is there a specific topic that you’d like us to show you on Framer? Get in touch with us!

๐Ÿš€ Get Started with Framer!
๐Ÿฅ Follow us on X
โœ‰๏ธ Mail us here

Follow these simple steps to create a dynamic Framer site with engaging videos and audio.

Adding Videos

  1. Select the Frame
    Click on the Frame where you want to add the video

  1. Insert Media
    Click the Insert icon in the top right corner
    Select the Media tab

  1. Add Video
    Drag and drop the appropriate icon (YouTube, Vimeo, or Video) into your Frame

  1. Adjust Positioning
    Use the panel options on the left to adjust your video’s size and position

  1. Configure Settings
    Scroll through the panel options to adjust settings based on your video source (options below)
For YouTube or Vimeo

Insert the video link.
Adjust settings like Autoplay, Mute, Color, and Radius.

For Other Videos

Insert a unique URL or upload a file from your computer.
Adjust settings like Play, Poster, Background, Radius, Start Time, Loop, Cover, Controls, and Mute.

You’re all set! Your video is now added to your Framer site.

โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”โ€”

Adding Audio
  1. Select the Frame
    Click on the Frame where you want to add the video

  1. Insert Media
    Click the Insert icon in the top right corner
    Select the Media tab

  1. Add Audio
    Drag and drop the appropriate icon (Spotify, Apple Podcasts, SoundCloud, Apple Music, Simple Cast, or MP3) into your Frame

  1. Adjust Sizing
    Use the panel options on the left to adjust the audio player’s size and position

  1. Configure Settings
    Scroll through the panel options to find Properties
    Insert the audio URL and adjust settings like Theme

You’re all set! Your audio is now added to your Framer site.

More Tutorials by Coastal Themes

Premium themes that tell your story.

Bring your ideas to life with themes that are beautiful, fast and easy to use.