Elements

How to add a YouTube or Vimeo video

September 15, 2026
How to add a YouTube or Vimeo video

In TeleportHQ, you show a YouTube or Vimeo video with the Iframe element. Add Iframe from Elements → Primitives → Media to your page, then paste the video's embed address into the src field in the Attributes section of the right panel. The video plays on your live site from YouTube or Vimeo, so it doesn't use your storage.

Before you start

  • You need the video's embed address, not the normal page address. The steps below show where to find it.
  • The video's owner must allow embedding. Most public YouTube and Vimeo videos do.

1. Copy the embed address

From YouTube:

  1. Open the video on YouTube.
  2. Below the video, click Share.
  3. Click Embed.
  4. In the code that appears, copy the address inside src="...". It looks like https://www.youtube.com/embed/abc123XYZ.

From Vimeo:

  1. Open the video on Vimeo.
  2. Click Share.
  3. Copy the embed code, then copy the address inside src="...". It looks like https://player.vimeo.com/video/123456789.

2. Add the video to your page

  1. In the TeleportHQ editor, select the container where the video should go.
  2. In the left sidebar, click Elements.
  3. On the Primitives tab, find the Media group.
  4. Click Iframe, or drag it onto the canvas. It starts with a sample YouTube video and is selected.
  5. In the right panel, find the Attributes section.
  6. Click in the src field and paste your embed address.
  7. Press Enter. The canvas shows your video.
The Attributes section of a TeleportHQ iframe, with a YouTube embed address in the src field highlighted

3. Size the video

A new iframe is 320 pixels wide and 200 pixels tall. To make it fill its section:

  1. With the iframe selected, in the right panel, open Size.
  2. Set the width to 100%.
  3. Set a height, for example 450px.

See How to set an element's width and height.

Check that it worked

The video's thumbnail shows on the canvas. On the canvas, clicks select the iframe instead of playing the video. To play it inside the editor, go to the Iframe Settings section and click Preview. A banner says "You are in live preview mode."; click Exit Preview when you're done. To check the whole page, preview your site.

Troubleshooting

The iframe shows "refused to connect" or a blank box You pasted the normal video page address (for example youtube.com/watch?v=...). Paste the embed address from step 1 instead.

"Video unavailable" shows inside the iframe The video is private, deleted or the owner turned off embedding. Use a different video, or ask the owner to allow embedding.

The video can't go full screen In the Attributes section, turn on full screen.

Good to know

  • Autoplay and looping are set in the address, not in TeleportHQ. For YouTube, add ?autoplay=1&mute=1 at the end of the embed address. Browsers only autoplay muted videos.
  • The allow field in Attributes gives the video extra browser permissions, for example autoplay; fullscreen.
  • Your own video files (MP4, MOV) use the Video element instead. See How to add a video from your computer.
  • Other embeds such as a booking calendar or a map work the same way. See How to embed another web page with an iframe.
Share

Related Articles

How to embed another web page with an iframe

In TeleportHQ, you show another website's page inside yours by adding an Iframe element from Elements → Primitives → Media and pasting the page's address into its src field in the Attributes section; the other site must allow embedding.

How to add a video from your computer

In TeleportHQ, you upload an MP4, M4V or MOV file to the Assets Manager, drag it onto your page as a Video element, and set its poster, controls, autoplay, loop and sound in the Video section of the right panel.

How to add your own HTML or JavaScript with Code Embed

In TeleportHQ, you add your own HTML, CSS or JavaScript to one spot on a page by dragging or clicking the Code Embed element in Elements → Primitives → Media, pasting the code into the Code Embed (HTML+CSS+JS) window and clicking Save.

How to preview your site before publishing

In the TeleportHQ editor, click Preview in the toolbar at the bottom of the screen to open a working copy of your whole site in a new tab, where you can click links, try interactions and switch between desktop, tablet and mobile views.

How to set an element's width and height

In TeleportHQ, select an element and type a Width and Height in the Size section of the right panel (in px, %, vw and other units), or drag the handles around the element on the canvas, where the edge snaps to the parent's and neighbours' edges.