How do I add a class to interactive video links?
Submitted by nschildre on Thu, 03/26/2020 - 00:42
Forums:
I am using the H5P Wordpress plugin and am trying to add a class to all H5P interactive video links.
This is what I have so far:
H5P.jQuery(document).ready(function () { // Listening for interactive video element if(H5P.jQuery('.h5p-interactive-video').length > 0) H5P.jQuery('.h5p-link a').addClass("modal-link"); });
How do I listen for the video to be loaded? My current script can't find the links because they don't exist yet.
Wordpress - Follow up question:
I am trying to load the links in a modal overlay. The code for the overlay is provided by a H5P unrelated plugin. Will that plugin work in H5P?
UPDATE:
I was able to add classes to those dynamically added links in the interactive videos in the following way:
if (H5P && H5P.instances[0] && H5P.instances[0].libraryInfo.machineName === 'H5P.InteractiveVideo') { H5P.jQuery(document).on('DOMNodeInserted', function(e) { if ( H5P.jQuery(e.target).find(".h5p-link-interaction") ) { H5P.jQuery(e.target).children("a").addClass("modal-link"); } }); }
Content types:
otacke
Thu, 03/26/2020 - 15:13
Permalink
Hi nschildre!H5P content is
Hi nschildre!
H5P content is often built dynamically, so you won't have access to all elements (e.g. links) even when the document.readyState is complete (you should probably just call this once for either interacted or complete anyway) or when the video is loaded.
If adding some properties to the h5p-link class is sufficient, then you should probably simply do that by overriding the stylesheet using the alter_styles hook, cmp. https://h5p.org/documentation/for-developers/visual-changes
Best,
Oliver
nschildre
Fri, 03/27/2020 - 00:59
Permalink
Thanks Oliver. I figured out
Thanks Oliver. I figured out how to do it. Please see my updated post.