Skip to content

Instantly share code, notes, and snippets.

@asha23
Last active October 15, 2020 10:51

Revisions

  1. asha23 created this gist Oct 15, 2020.
    40 changes: 40 additions & 0 deletions wistia.js
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    function parentWidth(elem) {
    return elem.parentElement.clientWidth;
    }
    var xhr = new XMLHttpRequest();
    var baseUrl = "https://fast.wistia.com/oembed/?url=";
    var accountUrl = encodeURIComponent("https://home.wistia.com/medias/");
    var wistiaId = document.querySelector('.wistia_embed').getAttribute('data-wistia-id');
    console.log("aaa");
    var image_size = parentWidth(document.querySelector(".embed-responsive"));//value in px
    console.log(image_size);
    var thumb_args = 'image_play_button=true&image_play_button_color=7b7968e0&image_resize='+image_size;
    xhr.open('GET', baseUrl + accountUrl + wistiaId + "&format=json&callback=?");
    xhr.send(null);
    xhr.onreadystatechange = function () {
    var DONE = 4;
    var OK = 200;
    if (xhr.readyState === DONE) {
    if (xhr.status === OK)
    var data = JSON.parse(xhr.responseText);
    var thumb = data.thumbnail_url.split('?')[0];
    thumb = thumb + "?" + "image_resize=200";
    var wistcont = document.querySelector("#wistia_" +wistiaId);
    var wistimg = document.createElement("img");
    wistimg.setAttribute("id",'wistia_preview');
    wistimg.setAttribute("src",thumb + "?" + thumb_args);
    wistimg.setAttribute("alt","Couldn't load Wistia video");
    wistimg.classList.add("responsive-img");
    wistcont.appendChild(wistimg);
    wistimg.addEventListener("click",function(){
    wistiaEmbed = Wistia.embed( wistiaId , {
    autoPlay: true,
    controlsVisibleOnLoad: false
    });
    },false);
    console.log(JSON.parse(xhr.responseText));
    } else {
    console.log(xhr.status);
    }
    }