Working With iframe In SharePoint Server 2016 And SharePoint Online

In this article, you will learn working with iframe in SharePoint Server 2016 and SharePoint Online.

iframe stands for inline frame. iframe support was introduced from SharePoint 2013 onward. With iframe tag, we can embed the documents and videos inline within the current SharePoint page. An iframe can be marked up as -

<iframe src="http://www.c-sharpcorner.com"></iframe>

The src attribute within the iframe tag is used to specify the URL of the document/video that occupies the inline frame. In order to use iframes within SharePoint, we have to make some configuration entry. If we are using any external domains within the iframe, it should be added as an approved domain in “HTML Field Security” section, in the site collection settings page. This is the recommended approach; however, I was able to embed videos from external domains which were not there in the approved domains list. We will see how to add the external domain to the approved list anyway.

Set Approved Domain

In order to add the domain to the approved list of domains, select “HTML Field Security” from Site Collection Administration section.



If the domain that is going to be used in the iframe is not present in the below list, type that particular domain and click on ‘Add’. Ensure that the radio button “Permit contributors to insert iframes from the following list of external domains into pages on this site” is selected.



Get the Embed Code

Once the domain has been added to the Approved set of domains, embed the document/video in the page. I am trying to embed a video from Channel 9 MSDN site on to the SharePoint page. Click on ‘embed’ on the video and select the embed code for the video. It is the iframe tag highlighted below.



In case of YouTube, we can get the embed code similarly.



Once you have the embed code, we can add it to the page.

Embed Content

We will add the embed code in a new page. Add the page and go to the edit mode of the page.



Click on Embed code which will open up the pop up where we can paste the iframe tag mark up.



After adding the mark up, click on Insert. This will embed the document/video on to the page.



The video has come up in the page along with the player, as shown below.



Similarly, we can use Content Editor Web Part as well, to embed the code. Thus, with HTML 5 support iframe has made its way into SharePoint. We can embed documents and videos from external domains on the SharePoint page by merely embedding the code. We can update the iframe tag attributes to modify the presentation of the content,

<iframe frameborder="4" width="700" height="270" src="//www.dailymotion.com/embed/video/x4ozdrb" allowfullscreen></iframe>

Here, we can set the frame border, width, height and other iframe attributes to define the presentation of the content on the page.

Summary - Thus, we saw how to embed videos in a SharePoint page, using iframe.