Search code examples
javascriptwistia

Wistia still image removes attribute value when page loads

I am trying to set a predefined still image with Wistia's API but for some reason it removes my predefined still (thumbnail) time attribute when page loads.

const videoEndpoint = `https://fast.wistia.com/embed/medias/${videoId}.json`

let videoStillUrl
            
$.ajax({
    async: false,
    url: videoEndpoint,
    success: function(data) {
       videoStillUrl = data.media.assets[6].url.replace("embed-ssl", "embed").replace(".bin", ".jpg") + '?video_still_time=25'
    }
});

console.log('VIDEO STILL URL: ' + videoStillUrl);

And this is the init:

this.video.find('.media-video__embed-wrap').html(`
   <script src="//fast.wistia.com/embed/medias/${videoId}.jsonp" defer></script>
   <script src="//fast.wistia.com/assets/external/E-v1.js" defer></script>
   <div class="wistia_embed wistia_async_${videoId} playerColor=cf4917 autoPlay=false playButton=false"></div>
`);

$('.wistia_embed').addClass(`stillUrl=${videoStillUrl}`)

Therefore, when I load my page, I get the following console log from above (with the =25): enter image description here

But when I open the Elements in the inspector, I can see that this gets ommited.

How can I fix this?

enter image description here

Solution

  • I managed to pinpoint the exact handler that makes changes to the URL at the proper time.

    I changed the init to the following snippet, using the window._wq reference:

    this.video.find('.media-video__embed-wrap').html(`
    <script src="//fast.wistia.com/embed/medias/${videoId}.jsonp" async></script>
    <script src="//fast.wistia.com/assets/external/E-v1.js" async></script>
    <div class="wistia_embed wistia_async_${videoId} playerColor=cf4917 autoPlay=false playButton=false"></div>

    <script>
        window._wq = window._wq || [];
        _wq.push({ id: '${videoId}', options: {stillUrl: '${videoStillUrl}'}});
    </script>
`);