Wednesday, July 21, 2021

Add content to your page using the embed web part

When you add a modern page to a site, you can add and customize web parts to build your SharePoint page. This article describes the Embed web part.

You can display content on your SharePoint page from sites that allow embedding (like YouTube or Bing maps, for example). For many sites, you can either use the site's web address for the content or embed code that the site provides.

Display content using a website address

You can embed content from some websites by copying and pasting the site's web address for the content into the Embed web part .

  1. Copy the link of the embeddable content you want to use. To do this, go to the site with the content you want to embed. Somewhere near the content you will typically see a Share button or link. Click it, and copy the link address provided.

    Example of using the address of a website to embed content
  2. On your SharePoint page, make sure you're in Edit mode. If you're not, click Edit at the top right of the page.

  3. If you don't already have an Embed web part on your page, hover your mouse above or below an existing web part or under the title region, click Circled plus sign used to add a modern web part to a page , and then select the Embed </> web part from the list.

  4. In the property pane on the right, paste the website address you copied earlier into the Website address or embed code box.

    Paste a video URL or Embed code into the field

Notes: 

  • If you don't see the property pane, click Edit web part Web part edit button on the left of the web part.

  • Links to content only work for websites that provide a specific service for embedding content using links. If a link doesn't work for the content you want to embed, try using the embed code instead.

Display content using embed code

Embed code is a list of specific instructions from a website that describe how to display that content on another page. Many sites offer embed codes on their pages for you to copy and paste. You'll typically see a button labeled Embed code or </>. This opens a text box with some code in it.

For example, click the Share button for a video on Vimeo to see the embed code in the share dialog.

Example of using embed code to embed content on SharePoint page

To use embed code, do the following:

  1. Copy the embed code (if available) for the content you want to use. To do this, go to the site with the content you want to embed. Somewhere near the content you will typically see a Share button or link, or a button labeled Embed code or </>. This will open a text box with some code in it, similar to the image from the Vimeo site above.

  2. If you don't already have an Embed web part on your page, click the SPO Plus sign in the area you want to insert the video, and select the Embed </> web part from the list.

  3. In the property pane on the right, paste the embed code into the Website address or embed code box.

    Paste a video URL or Embed code into the field

Notes: 

  • If you don't see the property pane, click Edit web part Web part edit button on the left of the web part.

Display dynamic content by connecting to another web part

With the Embed web part, you can enter links or embed code that use variables, allowing you to show a wide variety of items depending on what your page viewer selects. For example, you can show an image based on what a user selects from a list of Image URLs.

For information and examples, see Show a video, image, or location based on what a user selects in a List web part (connect an Embed web part to a List web part).

Example of an Embed web part connected to a list of images

Troubleshooting

Here are the most common reasons why embedding may not work:

  • Embed code must be iframe-based (that is, start and end with <iframe> tags). Embed code that uses <script> tags is not supported.

  • Only secure web sites can be embedded. Make sure the URL of the web site begins with HTTPS.

  • Not all websites allow their pages to be embedded, so you may not be able to embed them, even when they are secure and use iframe-based embed code. If you have problems, check with the website to see if they allow embedding.

  • Site collection administrators can control whether users can embed content from external websites. If they don't let contributors embed content, you may see an error message that says, "Embedding content from this website isn't allowed." See your administrator and/or the help article Allow or restrict the ability to embed content on SharePoint pages.

If you want to embed content from unsecured websites, or by using different embedding methods, let us know on UserVoice.

No comments:

Post a Comment