Adobe XD: How to insert video triggered by hover

Report · Jan 04, 2022

Hi there,
I'm building a prototype for a platform and would like to include videos in it that play triggered by hover. The small video animation is supposed to run in a loop as long as I stay with the cursor over the area. After that the animation should not only stop but change back to the default state ("start screen" of the animation, so that it can start again from the beginning).
Currently I can only start it by tapping - but tapping should have another function: that is, to get to the information page about the animation. I have also tried to start it key controlled, but when I press the specified key again to stop the video, it stops in the middle and does not reset to the starting point to start.
I really hope someone has some advice for me or a clever work-around.

Translated with www.DeepL.com/Translator (free version)

Report · Jan 04, 2022

Hi angelag98969912,

Thank you for reaching out. I would suggest you to please go through this article: https://helpx.adobe.com/xd/help/work-with-videos.html and check for the limitation and workflow of videos in XD.

I will also keep the discussion open for our XD experts who might share some workaround with you.

Thanks,

Harshika

Report · Jan 04, 2022

Hey, thanks for your reply. I already checked this article when I was searching for a solution on my own. Unfortunately I did not find an answer there. Really hoping for any XD expert to help me out on this.

Report · Jan 04, 2022

I have checked with the team if they have any suggestion on your worlflow and they said Component states can be used for this:

Create a component with the default state as the ‘thumbnail’ view, making sure the video is set to “No Playback”
Add a “Hover State” to the component
Within the hover state, set the video to “Play Automatically”

Please try the above steps to achieve the workflow and let us know if that helps.

Thanks,

Harshika