Widgets are embeddable content from external sources (eg. Twitter, Facebook, Google) that you can include on your web pages. They can be added as content in any "long" text field.
To add a widget to a field in a page:
Select "Embedded Widget" from the text format drop down menu below the content field
Paste in the code provided by the widget "service"
Note
You can mix HTML content with your embedded widget, however, you will have to type actual HTML directly into the field accordingly. You can also combine mutliple widgets in a single field.
Helpful Links
Here are links to the widget tools for several popular services:
Twitter (you need a Twitter account to create a widget)
We generally recommend using the JavaScript SDK version of the embed code, as it tends to work better responsively (on mobile devices) than the iFrame version.
In order to make your video responsive across all devices (mobile-friendly) you need to make a small addition to the embed code provided by YouTube.
Wrap the <iframe> in a <div> with a class of "video-container". {<div class="video-container "><iframe ....></iframe></div>}
Embed a YouTube playlist
Embed a playlist Sign in to your YouTube account on a computer. On the left side of the page, select the playlist you want to embed. Copy the playlist ID from the URL. Modify the embed code for an individual video by doing the following: In the place of the video ID (after "embed/"), substitute "videoseries?list=". Then paste the playlist ID after the "=". Paste the code into your blog or website HTML. Example: <div class="player"><iframe allow="autoplay; encrypted-media" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/videoseries?list=PLZTR3-P4bh1KhjzpKLNPsxQNvOIM9RQlW" width="560"></iframe></div>
UVM Streaming Media
Special Instructions
In order to make your video responsive across all devices (mobile-friendly) you need to make a small addition to the embed code provided.
Wrap the <iframe> in a <div> with a class of "player".
Here is the code snippet.
<div class="player"><iframe ....></iframe></div>
You can either view your code as "source" and manually place the wrapper div around the iframe, or, you can assign the div wrapper via a style dropdown.
To do that:
Paste your iframe source code into your content area while in "source" view
Change from "source" view to the default WYSIWIG view in the content editor
click 1x on the iFrame you just pasted to select it
In the "styles" dropdown, assign the "div- video container" style
Both approaches should yield exactly the same result.
The first step to embed a video hosted on a UVM server (or other private server) is to upload the video and obtain the web path to that video. Next copy and paste the code below using the source option in the wysiwyg editor
