Widgets are embeddable content from external sources (eg. Twitter, Facebook, YouTube) 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:

Embedding and Accessibility

UVM Drupal permits the use of “embed code” on web pages. When using embed code not supplied or recommended by the UVM Digital Team, it is the web editor’s responsibility to insure that the code meets established information security procedures and the UVM accessibility policy. Embed code often contains iFrames that most automated accessibility tools ignore, testing only the containing page. Therefore, web editors must take special care to verify that any iFrame content is accessible by using both automated tools (outside of the containing page) and manual testing methods (within the page itself). More information on web accessibility is located in our Drupal Web Guide.

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

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)

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>

Qualtrics and MS Forms

In order to make your form responisve (mobile-friendly) you need to follow these steps when embedding your code.

  • Wrap the <iframe> in a <div> with a class of Div-VideoContainer

To do that:

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

Save and preview before publishing to be sure it looks as you expect.