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

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.

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 Apply
6. Click the Source button and replace the existing code with the example provided at the bottom of this article.
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.
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 video
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>