Skip to main content
MediaBeacon University

How to Display Video in HTML Widgets

MB Build / Version: 8.3, 8.4

Issue

The Video Play widget has issues in 8.3, so to fulfill the function of playing a video in a workspace (not in a View Widget), we can use an HTML widget to do the same.

Resolution 

  1. Add a HTML widget to the workspace.
  2. Edit Widget Options
  3. Turn off iframe mode, at the bottom of window.
  4. Make sure html area is in "Advanced" mode (the view with fewer buttons at top)
  5. Paste the following into the HTML area
<video width="100%" height="auto" autoplay controls loop>
<source src="../servlet/dload/RB%5fnew%5fcollection%5f16%5fsocial%2emp4;jsessionid=1dwitj800lez3hnpsa78j44ey?id=200326169&amp;path=pe_4b4f204153534554532f52425f6e65775f636f6c6c656374696f6e5f31365f736f6369616c2e6d7034&amp;mime=video%2fmp4&amp;play=t" type="video/mp4">
</video>
  1. You will need to replace the bold portion with the html for the appropriate video
    1. Find the video you want to feature and enter asset view,
    2. play the video
    3. Pause the video
    4. Inspect (Dev Tools) the video
      1. See Fig 1 & 2
      2. Copy the src value, paste into the src in the above block
      3. Watch out you have no curly quotes in your HTML.

Results:

A video widget that will fill the available space. If you want to have the video limited by a given width, change the width="100%"to the appropriate width.

Figure 1

htmlwidgetvideo1.png

Figure 2

Screen Shot 2018-01-11 at 8.27.26 AM.png

Figure 3

htmlwidgetvideo2.png

 

  • Was this article helpful?