Embedding Maps, Videos & More

Learn how to embed Google Maps, YouTube videos, and other third-party content into your page.

Embedding third-party content

You can embed maps, videos, and other external content into your page using the Custom Code block. This lets you paste any HTML embed code directly into your site.

How to add a Google Map

Step 1 — Get the embed code from Google Maps

  1. Go to google.com/maps
  2. Search for the address or business name
  3. Click the Share button (next to the Directions button)
  4. Click the Embed a map tab
  5. Choose a size (Medium works well for most pages)
  6. Click Copy HTML

The code will look something like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!..." width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Step 2 — Add the map to your page

  1. In the MkPage editor, find Custom Code in the sidebar (under Extra)
  2. Drag it onto your page where you want the map
  3. Double-click the Custom Code block to open the code editor
  4. Paste the Google Maps iframe code
  5. Click Save

Tip: Change width="600" to width="100%" so the map stretches to fill the full width of its container.

How to embed a YouTube video

Step 1 — Get the embed code from YouTube

  1. Go to the YouTube video you want to embed
  2. Click Share below the video
  3. Click Embed
  4. Copy the iframe code

Step 2 — Add the video to your page

  1. Drag a Custom Code block onto your page
  2. Double-click it to open the code editor
  3. Paste the YouTube iframe code
  4. Click Save

Tip: Add style="width:100%; aspect-ratio:16/9;" to make the video responsive.

How to embed an Instagram post

  1. Go to the Instagram post on the web
  2. Click the three dots (⋯) → Embed
  3. Copy the embed code
  4. Paste into a Custom Code block in the editor

How to embed a Spotify player

  1. Go to the track, album, or playlist on Spotify
  2. Click Share → Embed
  3. Copy the embed code
  4. Paste into a Custom Code block in the editor

Other embeds

The Custom Code block accepts any valid HTML, so you can embed content from virtually any platform that provides embed codes, including:

  • Calendly — booking widgets
  • Typeform — surveys and quizzes
  • SoundCloud — audio players
  • TikTok — video embeds
  • Google Forms — form embeds

Just find the embed/iframe code from the platform and paste it into a Custom Code block.

Tips

  • Always use width="100%" on iframes so they look good on mobile
  • If an embed looks too tall or short, adjust the height value in the iframe code
  • Some embeds load additional scripts — this is normal and won't affect your site's performance significantly
PreviousComponents & Blocks
NextBrowsing Templates