AnsweredAssumed Answered

Replacing the video player thumb image with a lager image

Question asked by Mark Van de Velde on Oct 17, 2017
Latest reply on Oct 1, 2018 by Mark Van de Velde

I've been working on some code when I have time to change the small thumbnail image of the video player with a larger image.  I've finally got most of the code needed to do this now worked out. Funny thing is, there is actually a larger image sitting on the server, just its not used as the thumbnail. My script is working in the browser script consol after the page loads, just not as a theme JS file. Just one thing I need help with and thats using the MutationObserver function. James Jones You may be able to help me out here? 


The origional HTML on the page is:


<a id="media_comment_m-xxxxxxxxxxxxxxxxxxxx" class="instructure_inline_media_comment video_comment" data-media_comment_type="video"></a>


It's then at some point a Canvas script updates it to this:


<a id="media_comment_m-xxxxxxxxxxxxxxxxxxxxx" class="instructure_inline_media_comment video_comment" data-media_comment_type="video" href="#" style="padding: 0px;">
<span class="media_comment_thumbnail media_comment_thumbnail-normal" style="background-image: url(;">
<span class="media_comment_thumbnail_play_button">
<span class="screenreader-only"> Click to view </span>


Only after that DOM update will my script work. I just dont want to use the wait function, I'd rather be more specific.

The code I have so far is attached.


This is to help solve a problem related to several posts ...

Can the recorded media object be manipulated? 

Resize the player for video objects uploaded/recorded through Rich Content Editor 

Can I change the size of the video player embedded in a page?