Skip to main content

How to add Videos

Shubham Rahane
  • Updated

Overview

In Fastr Frontend v2, we have a few different options for how you can embed a video in your content. This article will go over the steps for adding videos from Youtube or Vimeo, but we can typically support other hosting platforms as well. The highlighted widget below is the HTML widget, which we will use to embed the video. For information on all of the different widget types in Fastr Frontend, please review here: Widget Types



Embedding a Vimeo Video

Embedding a Youtube Video

Embedding a Vimeo Video

  1. As a first step, you can add the HTML widget to your canvas. You should size this widget so that it is approximately the same aspect ratio as your video. We can always resize this widget later, so this should just be a quick placeholder to get started.
  2. With the HTML widget selected, we can take a look at the Design tab. You will want to select this icon to switch to the "Embed URL" mode for your widget: 
  3. The next step is getting the URL from Vimeo. You'll need to make sure you get the correct URL format. A standard Vimeo link will look like this, and it will not embed correctly: https://vimeo.com/803127146

    So as a first step, you'll want to click the "Share" option:
    |
     
  4. From here, you'll want to look for the embed code. In this code, you'll just need the URL that follows the "src=" section as I've shown here:



    This gives me a properly formatted URL. You'll really only need the beginning, so in my case it would be: https://player.vimeo.com/video/803127146
     
  5. From this point, you will want to paste that Vimeo video URL into the Embed URL field from step 2, as shown here. Once this is done, you will immediately see the video load: 


     
    This is now all set. A few important notes:
    1. Aspect Ratio - You'll need to make sure your video size is the same size as the Embed URL Widget. For most Vimeo videos this is a 16:9 ratio. The following tool is helpful for quick calculations on what size your widget should be: https://andrew.hedges.name/experiments/aspect_ratio/
    2. URL Parameters - You might need to adjust various parameters to make sure the video loops, autoplays, is muted, hides controls, etc. Vimeo has a helpful article that shows how these can be added: https://help.vimeo.com/hc/en-us/articles/12426260232977-Player-parameters-overview
    3. Shortcuts - Your Vimeo video will always have the format of "https://player.vimeo.com/video/INSERT_ID_HERE". To save some time, you can just copy the ID from your original URL and use that format. 

Embedding a Youtube Video

  1. As a first step, you can add the HTML widget to your canvas. You should size this widget so that it is approximately the same aspect ratio as your video. We can always resize this widget later, so this should just be a quick placeholder to get started.
  2. With the HTML widget selected, we can take a look at the Design tab. You will want to select this icon to switch to the "Embed URL" mode for your widget: 
  3. Next you'll need to make sure you get the correct URL format. A standard YouTube link will look like this, and it will not embed correctly: https://www.youtube.com/watch?v=P5ew9pFk8ZU

    So as a first step, you'll want to click the "Share" option:
    |
     
  4. From here, you'll want to look for the embed code. In this code, you'll just need the URL that follows the "src=" section as I've shown here:



    This gives me a properly formatted URL. You'll really only need the beginning, so in my case it would be: https://www.youtube.com/embed/P5ew9pFk8ZU

    In some cases, you will need to ensure the correct embed options have been enabled for your Youtube video. Selecting the checkbox for "Enable privacy-enhanced mode" can ensure this will load as intended. 
     
  5. From this point, you will want to paste that Vimeo video URL into the Embed URL field from step 2, as shown here. Once this is done, you will immediately see the video load: 


     Your video is now all set. You will notice a live preview of the Youtube video in your Embed URL widget:
    A few important notes:
    1. Aspect Ratio - You'll need to make sure your video size is the same size as the Embed URL Widget. For most YouTube videos this is a 16:9 ratio. The following tool is helpful for quick calculations on what size your widget should be: https://andrew.hedges.name/experiments/aspect_ratio/
    2. URL Parameters - You might need to adjust various parameters to make sure the video loops, autoplays, is muted, hides controls, etc. Vimeo has a helpful article that shows how these can be added: https://developers.google.com/youtube/player_parameters
    3. Shortcuts - Your YouTube video will always have the format of "https://www.youtube.com/embed/INSERT_ID_HERE". To save some time, you can just copy the ID from your original URL and use that format. 

Video FAQs

  1. Can I use a video that has been uploaded to a different source?
    • Answer: Yes - We support embed options for many other video hosting platforms. Vimeo and Youtube are being used as examples, but the steps remain the same for most sources. Please contact support@getfastr.com if you need further assistance
  2. Can I upload my video into Fastr Frontend?
    • Answer: No - At this time, you will need to upload your video to a different source
  3. Can I have my video appear in a pop-up instead?
    • Answer: Yes - We have support for creating lightbox pop-ups and overlays that can be used. For more information on how to set this up, please review the following article: Interactions: Overlays

If you have any follow-up questions or need further assistance, please feel free to reach out to us at support@getfastr.com — we're happy to help!

Related articles

Comments

0 comments

Please sign in to leave a comment.