Adding Videos to Guides

These instructions are specific to videos from our subscribed databases that require authentication. If you are pulling a video from a database that does not require authentication, please see the YouTube tab and follow those instructions.

These directions are written for Chrome. You may be able to find the same information in other browsers.

Adding videos from library content is more involved since OpenAthens doesn't allow us to embed library content onto any webpage directly. Instead, we create a faux-embedded video, which is to say that it looks like an embedded video, but it's really a set of links out to the video itself. Since this is more complicated than a Vimeo or YouTube video, let's split this up into a few sections.

1. Get a thumbnail.
2. Create the video widget.

What's a thumbnail, you ask? It's the image that displays when you land on the video page before the video plays. We use the vendor's thumbnails whenever possible instead of creating our own for a few reasons: it's already available, it ensures our video thumbnail will match the vendor's, and it's typically clearer in quality than what we can create ourselves.

Getting thumbnails for videos differs slightly from vendor to vendor. The example we'll walk through is from Films on Demand, but you'll take similar steps for other vendors.

1. Open the video in the native database interface.
2. Right-click on the image in the video player and select Inspect. Note that you want to right-click on the image, not on any of the controls, etc.
   
    
3. A new pop-up will open as a separate page or a section within your browser.
4. If you're lucky (and sometimes you are), you will open to the exact thing you're looking for, which is the image link for the video's thumbnail. If not, you'll need to expand sections until you come across the thumbnail URL. Click the left and down carets to expand and close sections.
   
    
5. In our example, note that the alt (which stands for alt text) says, "Video thumbnail for 114815," which is an excellent indicator that this is probably the link you want.
   
    
6. In general, you're looking for a link that is not proxied or a link that you can easily change from proxied to not proxied without breaking it. The thumbnail link from Films on Demand is proxied (https://fod-infobase-com.eu1.proxy.openathens.net/image/114815); however, when I manually change it to a non-proxied link (https://fod.infobase.com/image/114815), it takes me to a page with a usable URL. You can always check to see if the link works without authentication by pasting the link into a new incognito window (right-click on the Chrome icon in your taskbar or desktop and choose New incognito window). You should see the image without being asked to log in.
   

You'll want to copy the non-proxied link into your Notepad as you'll need it in the next step.

1. Update the necessary fields in the sample code.
   1. img src: This is where the URL for your thumbnail goes.
   2. onclick: "window.open(': This is the URL to the video that you would typically use when linking to the item. You will need to add the OpenAthens prefix to this URL if required. See the LibGuides SOP if you are unsure what link to use.
   3. href: This is the same link that you used for the onclick entry (step b); it's the URL to the video. You will need to add the OpenAthens prefix to this URL if required.
   4. The title of the video with the time entered after it. Adding the time is helpful for students, so they'll know how long watching the video will take.
   5. An abstract / synopsis of the video. Often, the abstract needs to be rewritten slightly to let the user know what the video's about or to read better on the page. Read it and edit it if necessary before adding it to your guide.
   
   <div class="video-play">
       <img src="https://cdnsecakmi.kaltura.com/p/1067292/sp/106729200/thumbnail/entry_id/0_tiedhpa1/version/100011/acv/171/width/900" alt="video thumbnail" />
       <button class="btn btn-default" onclick="window.open('https://widgets.ebscohost.com/prod/customlink/proxify/proxify.php?count=1&encode=1&proxy=https%3A%2F%2Fgo.openathens.net%2Fredirector%2Fphoenix.edu%3Furl%3D&target=https://fod.infobase.com/PortalPlaylists.aspx?wID=18566&xtid=114815');" type="button">
           <div class="play-icon">
               <svg viewBox="0 0 20 20" preserveAspectRatio="xMidYMid" focusable="false" aria-labelledby="play-icon-title" role="img">
                   <title id="play-icon-title">Play</title>
                   <polygon class="fill" points="1,0 20,10 1,20"></polygon>
               </svg>
           </div>
       </button>
   </div>
   <div class="video-title">
       <a href="https://widgets.ebscohost.com/prod/customlink/proxify/proxify.php?count=1&encode=1&proxy=https%3A%2F%2Fgo.openathens.net%2Fredirector%2Fphoenix.edu%3Furl%3D&target=https://fod.infobase.com/PortalPlaylists.aspx?wID=18566&xtid=114815" target="_blank">Accounting: When Am I Ever Going to Use This? (19:32)</a>
   </div>
   <div class="video-text">
       Discover why accounting is the backbone of every business, how an accounting system works, and learn about potential career opportunities. You'll also be introduced to working professionals who demonstrate how they use their accounting skills to succeed in their careers and personal lives.
   </div>
    
2. On your guide, select Media / Widget from the Add / Reorder option in the box you're adding the video to.
3. In the Widget Name field, enter the three or four-digit database code, followed by: Name of the video [video].
4. In the Embed Code field, enter your code.
5. In the Position drop-down, select in which order this item should display. This is particularly important for mobile view.
   
    
6. Under the Subject Associations tab, select the correct college or site for the content.
   
    
7. Click Save to save your widget to the page.