Vidyard recently switched to a new user interface. Click here to compare the previous and current menu.

How do I create a transparent box around my video that opens a link when clicked?

Steps:

  1. Hover over the player and select Events.
  2. Click Add Event.
  3. Click Annotation and hit Add Event.
  4. Set the Background Transparency to 100% and click Apply.
  5. Erase the content.
  6. Click Source and replace the code with the code below.
    Note: Remember to change the URL.
  7. Set the Annotation time.
  8. Publish the annotation.
  9. Click Save.
<style type="text/css">/* Quick reset to ensure the Annotation area is full height/width and no default padding*/
html,body{
height:100%;
width: 100%;
margin: 0 auto;
padding:0;
}

.website-link{
height: 176px; /* Annotation Height */
width: 632px;/* Annotation Width */
}

.website-link a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}</style>

<div class="website-link">
<a target="_blank" href="http://placeURLhere.com">&nbsp;</a>
</div>

ViewedIt Walkthrough:

Was this article helpful?

Can’t find what you’re looking for? Please contact us below.

Email Vidyard Support
Why you didn't like the article?
  • No, Thanks