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.

University of Vermont

Google Map Example

Google Calendar Example

YouTube Example

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 by YouTube.

  • Wrap the <iframe> in a <div> with a class of "video-container". {<div class="video-container "><iframe ....></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". {<div class="player"><iframe ....></iframe></div>}

LinkIn Profile (via embed.ly)

University of Vermont | LinkedIn

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>