Drupal Lite : Use an iFrame to Embed Google Slides in a Page

A Google Slide can be embedded in a page. The Slides need to be published to the web so that visitors can view the presentation on the page.

Embed a Google Slide Presentation

Publish the Google Slides

  1. Select File.
  2. Select Publish to the Web.The publish to the web options are displayed.
  3. Select the Embed tab at the top.
    1. Choose the options for auto-advancing slides.
    2. There isn't an option to select no auto-advance, but the URL can easily be edited to not auto-advance when it is added to the page (see below).
  4. Select Publish.
  5. Select Start Publishing.
    1. A confirmation is displayed. Select OK.
  6. Copy the Embed Code.

Edit the Embed Code

The Drupal custom block will only accept the URL that is in the copied embed code. Remove the extra HTML from the embed code.

  1. Open a text editing application (Google Docs, Word, Text Edit, Notepad, etc.)
  2. Paste in the embed code.
  3. Remove the <iframe src=" from the beginning of the embed code (shown with yellow highlighting in the image below).
  4. Remove the " frameborder= .... /iframe> at the end of the embed code (shown with yellow highlighting in the image below).
    • Ensure that the quotation marks are removed. Only the URL should be used.
      the html embed code.

Embed the Google Slides in a Drupal Lite Page

  1. Log in to the Drupal Lite site.
  2. Locate the page to edit.
  3. Select the Layout button. The Layout Builder is displayed.
  4. Select the Add Block button in the region where the slides will be displayed. The Choose a Block palette is displayed.
  5. Select Create Custom Block button at the top of the palette. The Add a New Custom Block palette is displayed.
  6. Select iFrame. The Configure Block palette is displayed.
    1. Enter the Title for the iFrame
      • Deselect the Display Title if you do not want it displayed.
    2. Paste the copied URL of the published Google Slides in the iFrame URL field.
      • The URL has parameters at the end to configure the auto-play options. If you do not want the slides to auto-play, remove everything after  /EMBED. For example, if the default settings were selected when publishing, the character string ?start=false&loop=false&delayms=3000 would be removed from the end of the pasted URL.
    3. Enter iFrame Title, iFrame Width, and iFrame Height. These are optional and can be left blank.
    4. Select Add Block. The Configure Block palette is closed and the Layout Builder is displayed.
  7. Select Save Layout near the top of the page.

Size of the Google Slides

The Google Slides will fit the area of the region where it is placed. If the page is using a multi-column layout, and one of the columns is particularly tall, the embedded slides will have a lot of empty space above and below:

a page with body text on the left and the google slides on the right.

Find the height of the slides in pixels

  1. Take a screen shot of the browser window showing the slideshow on the page in your site.
  2. Visit https://www.rapidtables.com/web/tools/pixel-ruler.html
  3. Paste the screen shot.
  4. Click at the top of the slides.
  5. Click at the bottom of the slides.
  6. The height in pixels is displayed in the toolbar.
    • The height won't be exact, so add a few pixels to the displayed height. In the image below, 220 pixels would be a good height to use.
      the height of the slides is displayed in the toolbar as 209 pixels tall.

Edit the Custom Block Google Slides

  1. Log in to your site.
  2. Find the page with the slides.
  3. Select Layout. The Layout Builder is displayed.
  4. Find the block with the slides.
    1. Select the Pencil icon in the top right corner of the block.
    2. Select Configure. The configure block palette is displayed.
      the block with the slideshow in the layout builder. the pencil icon and menu are highlighted.
    3. Enter the number of Pixels for the height of the slides in the field iFrame Height.
    4. Select Update. The configure block palette closes, and the Layout Builder is displayed.
  5. Select Save Layout at the top of the page.

the resized height of slideshow on the page.

 

Last modified

Changed

TDX ID

TDX ID
5757