Show BLOB in iframe src

Question

Good afternoon, I’m here posting my doubt because I’ve tried some workarunds to get what I want and I’m not getting.

My goal is to first hide the main link that is in the database. Let’s assume that the link that is stored is www.google.com*

<img src="img/server.png" class="img-thumbnail servidor" data-videolink="www.google.com" data-server="servername"/>

Here I call (with echo PHP) the data-videolink which is the link that is stored in the database. But instead of showing www.google.com I would like you to show a blob (ie hiding the original address as I already explained)

This is my j

$(document).ready(function () {
    $('#servidores-bg .servidor').click(function () {
        $('.container > #servidores-bg').hide();
        var videolink = $(this).data('videolink');  
//$('#servidores-player').prepend("<iframe src='"+videolink+"' id='player' scrolling='no' frameborder='0' allowfullscreen='true' webkitallowfullscreen='true' mozallowfullscreen='true'></iframe>"); <---- PREVIOUS CODE LINE
        $('#servidores-player').prepend("<iframe id='player'></iframe>");

        var html = ``; <-- A ideia que tive foi colocar o iframe com a src original da base de dados ao clicar na imagem com o data-video link mas percebi que não faz sentido isso :(
        var blob = new Blob([html], {type: 'text/html'});
        var iframe = document.querySelector("#player");
        iframe.src = URL.createObjectURL(blob);
    });
});

Any help? I’m really stuck here

Answer 1

You already have the Blob, then just turn it into text again:

$(document).ready(function () {
  $('.servidor').click(function () {
    $('#servidores-bg').hide();
    var videolink = $(this).data('videolink');  
    $('#servidores-player').prepend("<iframe id='player'></iframe>");
    var blob = new Blob([videolink], {type: 'text/html'});
    var iframe = document.querySelector("#player");
    //transforma o blob em texto
    blob.text().then(url => iframe.src = url);
  });
});