Embedded Content
Embedding content on a website means incorporating external content directly into a web page. This allows you to display multimedia elements, documents, or interactive features without having to host the content yourself. Common examples of embedded content include videos, social media posts, maps, documents, calendars, forms, and other interactive elements via an <iframe>.
In Sitefinity
Within the Sitefinity Content Management System the iframe content is usually brought in to the WYSIWYG editor using an HTML embed code provided by the content host (like YouTube, Panopto, Microsoft, Google Maps, Facebook, etc.)
Embedded content can be part of any module which allows users to manipulate the typography on the websites through either the WYSIWYG editor and also allows for a full HTML view of the content.
The Basics
What is an iframe?
An <iframe> (short for inline frame) is an HTML element that allows you to embed another HTML document within the current document.
Typically, users will not edit many parts of the provided code, however, it is good to understand what attributes make up an iframe to better know how these attributes allow users to control the behavior, appearance, and permissions of the embedded content. Here are the typical parts and attributes of an <iframe>:
- The basic structure of an
<iframe>element consists of an opening tag and a closing tag</iframe> - src: URL of the embedded content.
- width and height: Dimensions of the iframe.
- frameborder: Border visibility.
- title: Title of the content - required for accessibility compliance.
- allowfullscreen: Fullscreen capability.
- name: Target name for links.
- sandbox: Additional restrictions.
- srcdoc: Inline HTML content.
- referrerpolicy: Referrer information policy.
- loading: Lazy loading behavior.
- allow: Permissions for embedded content features.
Basic example of a YouTube video iframe
<iframe
title="Youtube: Thank you veterans"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
frameborder="0"
height="315"
src="https://www.youtube.com/embed/tydINCfow7I"
width="560">
</iframe>
How to embed content
Embedding typically involves copying a snippet of HTML code called an <iframe> from the content provider and pasting it into the HTML of the web page using the WYSIWYG editor. Learn how to use the WYSIWYG editor.
Once the <iframe> has been added, ensure there is a title representing what the iframe is bringing in, if the content provider did not add title=" content title" in to the provided code, please add it in, ensuring there is a space before and after the title.
Example of Title
<iframe title="Youtube: Thank you veterans" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/tydINCfow7I" width="560">
</iframe>
Responsive Handling
Responsive design ensures that your embedded content adapts to different screen sizes and devices. This is crucial for maintaining usability and aesthetics on mobile devices, tablets, and desktops, improving user experience and accessibility.
Change width & height
On some applications adjusting the width attribute to 100% and the height to the desired height on all screen sizes will allow for the content to flex inside of the designated area. This method is used with maps, forms, and other types of content where the users are able to scroll or zoom the embedded content.
100% Width
<iframe width="100%" title="Galveston map" height="200" frameborder="0" style="border:0px solid #ffffff;margin:0px;padding:0px;" border="0" scrolling="no" src="https://map.concept3d.com/?id=747&sbh=1&tbh=1#!ct/14605?mc/29.2961669048794,-94.83326006054688?z/12/"></iframe>
Responsive Embedding Class
Wrap the iframe in a container. Create a div container around the iframe and apply a pre-written responsive embedding class. This technique uses CSS to maintain the aspect ratio of the video container and ensures it scales with the width of the parent container, making the embedded content responsive. Use this method when adding videos which have an applied width and height.
Video: 16x9 Aspect Ratio (Default)
CSS Class:video-embed
<div class="video-embed">
<iframe
title="Youtube: Thank you veterans"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
frameborder="0"
height="315"
src="https://www.youtube.com/embed/tydINCfow7I"
width="560">
</iframe>
</div>Video: 21x9 Aspect Ratio
CSS Class:video-embed video-embed-21by9
<div class="video-embed video-embed-21by9">
<iframe
title="Youtube: Thank you veterans"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
frameborder="0"
height="315"
src="https://www.youtube.com/embed/tydINCfow7I"
width="560">
</iframe>
</div>
Video: 4x3 Aspect Ratio
CSS Class:video-embed video-embed-4by3
<div class="video-embed video-embed-4by3">
<iframe
title="Youtube: Thank you veterans"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
frameborder="0"
height="315"
src="https://www.youtube.com/embed/tydINCfow7I"
width="560">
</iframe>
</div>
Video: 1x1 Aspect Ratio
CSS Class:video-embed video-embed-1by1
<div class="video-embed video-embed-1by1">
<iframe
title="Youtube: Thank you veterans"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen=""
frameborder="0"
height="315"
src="https://www.youtube.com/embed/tydINCfow7I"
width="560">
</iframe>
</div>
Other / Custom Content
For embedding some types of content like maps, social media posts, or documents, you may need to follow similar steps or use specific methods provided by the content provider including adding JavaScript from the provider. Often, providers offer customization options or settings for embedding their product. Follow all instructions provided.
Content Security Policy
When adding a new source to any UTMB website there may be a need to add the source URL to the safe-list at the system level. This need will be glaringly obvious if the embed is not rendering the content. Learn more about the CSP.
Sitefinity Modules
Content modules create collections of content that can be displayed on web pages and in templates. Embedded content can be part of any module which allows users to manipulate the typography on the websites through either the WYSIWYG editor and also allows for a full HTML view of the content. The following modules allow users to embed content on the websites through the WYSIWYG editor on the widgets or content items: Content Blocks, Lists, Blogs and Events modules. Learn more about adding content and classes to each of these modules by clicking on the provided links.