Articles in this section

See more

How do I create an annotation effect which enlarges my image automatically when hovering on it?

Avatar
Evan Stewart

Overview

Advanced annotation events appear within a player while a video plays, allowing you to enrich your video content with just about any extra content you need.

This allows you to add rich interactivity to your video right from inside the player. You can add in-player downloads, links to shopping carts or other videos, surveys, and more. Vidyard annotations are incredibly flexible, giving you the power to customize them for just about any use you can dream up.

GIF example of interactive annotations that enlarge when your mouse hovers over them

Solution

  1. In the Vidyard Platform click Content and select Players
  2. Hover over the player that you wish to add the event to and click Events
  3. On the Events page scroll down and click Add Event
  4. Select Annotation and click Add Event
  5. On the Annotation Style screen set Background Transparency to 100% and click ApplySet transparency to 100% in the Annotation Style
  6. Click the Source button and replace the existing code with the example provided at the bottom of this article.Paste the code below in the Source code editor
  7. Configure the section -
    <a class="demo-link" target="_blank" href="Paste image redirect URL here">
    Note: Once the image is clicked it will redirect to this URL in a new tab
  8. Configure the section -
    <img class="demo-btn" src="Paste the image URL here.png" /> </a>
    Note: The image needs to be publicly hosted to be referenced. This will accept any image files.
  9. Set the Skippable toggle to OFF and the Published toggle to ON
  10. Set the annotation time to as long as you desire it to show on the player.Location to edit the placement time of the annotation
  11. Click the Source button to exit the source code editor, then select Annotation Style
  12. Configure the height/width of the image by dragging the dots and click and drag the image to move to the desired placement of the videoGIF example how to expand or shrink the annotation that you created within the Vidyard event's builder
  13. Click Apply
  14. Save

This code can be repurposed multiple times and configured for use in other players.

Annotation Code

<style type="text/css">.sc-section {
height: 100%;
}
.sc-section, .demo-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
.sc-section img {
width: 85%;
}
.demo-link img{
cursor: pointer;
transition: 0.5s all;
}
.demo-link img:hover {
transform: scale(1.1,1.1)
}
</style><div class="sc-section"><a class="demo-link" target="_blank" href="Paste image redirect URL here"><img class="demo-btn" src="[Paste the image URL here.png]" /> </a></div><script type="text/javascript">
$('.demo-link').click(function() {
var playerId = window.frameElement.src.split('/');
playerId = playerId[playerId.length-3];
var playerData = {uuid: playerId, event: 'pause'};
window.parent.postMessage(JSON.stringify(playerData), '*');
});
</script>



Related articles