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:

  1. Select "Embedded Widget" from the text format drop down menu below the content field
  2. Paste in the code provided by the widget "service"

embed link

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 Example

Facebook Example

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.

Google Map Example

Google Calendar Example

YouTube Example

Special Instructions

 

Make your video responsive

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:

  1. Paste your iframe source code into your content area while in "source" view
  2. Change from "source" view to the default WYSIWIG view in the content editor
  3. click 1x on the iFrame you just pasted to select it
  4. In the "styles" dropdown, assign the "div- video container" style

Both approaches should yield exactly the same result.

LinkIn Profile (via embed.ly)

HTML5 Video (MP4, MOV, WEBM)

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 

<——-Start Copy——->

<div class="video-container">     

     <video controls> 

          <source src="path/to/file/myVideo.mp4" type="video/mp4"> 

          <source src="path/to/file/myVideo.webm" type="video/webm"> 

          <p>Your browser doesn't support HTML5 video. Here is a

               <a href="myVideo.mp4">link to the video</a> instead. 

          </p>

     </video>

</div>
<——-End Copy——->

Code with explaination 

<div class="video-container"> <— wrap the video tag in a div with a class of video-container

     <video controls> <— video tag with controls

          <source src="path/to/file/myVideo.mp4" type="video/mp4"> <— example of am mp4

          <source src="path/to/file/myVideo.webm" type="video/webm"> <- example of a webm file

          <p>Your browser doesn't support HTML5 video. Here is a

               <a href="myVideo.mp4">link to the video</a> instead. <— this should link to your video

          </p>

     </video>

</div>