iFrame integration!

This page shows some examples for iFrame integration to In general it's always the same:

  1. Search for the service you want to integrate
  2. Copy the iFrame integration code to embed the site or widget
  3. Create a code block on your page
  4. Copy the iFrame integration code into it and add your own HTML if needed.
  5. If needed, adapt the width and height attributes in the code. Both should be "100%" if possible, otherwise set width to "320" for one-column and to "660" for two-column blocks. Height can be anything, e.g. "500".

Click here for detailed help on

Weather forecast

Go to Meteoblue and set up a widget. Copy the iFrame code into a code block and add your own HTML if needed.


You may also want to check the weather widgets at

Spotify playlist

Go to Spotify on the web, choose your playlist, click on the three dots, 'Share' and 'Copy embed code'. Then copy the iFrame code in a code block.

You can also add playlists from SoundCloud or Deezer.

Instagram Share

Open instagram from your web browser, choose a photo you shared. At the top right there is a 3-dot menu. Click it, choose 'Embed' and copy that code into a code block.

View this post on Instagram

A post shared by Frank D (@frankdux_germany)

Google Sheets

Go to your Google Sheet, click on 'File', 'Publish to the web', choose 'Embed' and copy the iFrame code in a code block.

YouTube video

Choose your YouTube video, go to 'Share', 'Embed'. Then copy the iFrame code in a code block. Change the width to 100% and height attributes to e.g. 500, otherwise the video may spill over.

Note that there is a specific block type for embedding YouTube videos to make it even easier

Google calendar

Create a public calendar in Google, look at the "calendar integration" options and copy the iFrame-code to a code block. Please adjust the width in the copied code to "300". You can also adjust some settings within Google.

Note that you can use the 'calendar integration' block type for an easier (and prettier) way to integrate a Google calendar as shown here.

Diagram in Google Sheets

Read more about integrating a diagram fed with live data from Google Sheets.

Chessboard offers several chess boards and exercises for integration.

You can also have a look at PlayPager

Photo albums

Look at Albumizr to create a photo album which can be embedded with an iFrame.

  1. Upload your photos there
  2. Click on Embed
  3. Copy the generated code into an iFrame block (and adjust the width to 340 px for standard-width blocks)

... or look at the Flickr Album integration.

TikTok video

Choose your video on TikTok, share it with option "Embed". Copy the code into an iFrame block.
Set the width and max-width attributes in that code to 300px.

#jasonstatham #fastandfurious #fypシ

♬ See You Again (feat. Charlie Puth) - Wiz Khalifa

Flickr Photo Album

You can embed a photo album from Flickr: Go to, create an album and add photos to it, then click on 'Share', 'Embed' and choose 'Small' as size (320x240).


Note that the album (and thus the photos as well) have to be public. Sometimes there seems to be a delay when adding photos to an album on-the-fly from the Flickr App.

Trading chart

Go to TradingView and adjust your widget. Note that the width should not be more than 320 pixels. Using "auto-size" is best.

Clock widgets

Go to and choose a clock type, then embed it in an iFrame.

Display static value

Enter a short headline and description (both optional) and the type of number or text you want to display. For percentages, the value must be a full number between 0 and 100. Then set the color.



© 2021 Frank Dux
Imprint/Privacy Logo