Add videos and content published on cloud applications to your courses
Embed your content in your Text & Image modules.
Availability: all customers
Embedded content appears as part of the module, but without uploading a copy to LearnUpon.
Your external content must be published and shareable, subject to the access permissions set by your system administrator.
External content includes:
- documents and presentations hosted on cloud applications like Google Drive, SharePoint and Office365
- videos from sources like YouTube, Vimeo, or Wistia
Where to find embeddable media URLs
LearnUpon supports iFrame based media embedding, but does not support JavaScript based embedded videos. The embed code for your content must rely on an iFrame, and not 3rd party JavaScript. Generally:
- if you see <iframe> tags in the embed code your video will work
- if you see <script> tags, the embedded video will not work
Some providers, such as YouTube, offer iFrame by default. Navigate to the content you want to share, and click Share > Embed underneath the item. This step generates the iFrame based code you can embed in Text & Image modules.
Some providers like Wistia offer both standard and fallback embed codes. In this case, you want to choose the fallback option, which is iFrame-based.
The following screenshot shows Google Drive's Publish to the web > Embed dialog for a link to a presentation.
See Use the rich text editor about adding external links and embedding media, using CK Editor.
Make media responsive to resize for different screens
By default, most embed codes generated for you are not responsive: they are set to a fixed height or width, and do not adjust to different screen sizes or mobile devices.
To ensure your content fits across all screen sizes, LearnUpon recommends a wrapper class to work with the embed code.
Tip: The "video-responsive" class works for all kinds of external media, including docs, slides and videos.
<div class="video-responsive">
<iframe src="embed_url_for_video" width="100%" />
</div>
In this example, the embed_url_for_video comes from the video provider. The embed code for this video is:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/2wuN7IRLMxU"
frameborder="0" allow="accelerometer; autoplay;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe>
Take the URL found in the src above, and put it into the wrapper class. The finished responsive embed code is:
<div class="video-responsive">
<iframe src="https://www.youtube.com/embed/2wuN7IRLMxU" width="100%" />
</div>
See: