Для цикла с iframe в html, спортируйте кнопку воспроизведения

Question

Я пытаюсь создать цикл for, который отображает кнопку воспроизведения Spotify для каждого URI, который я поместил в определенный список. Таким образом, если бы этот альбом spotify:album:08Cq2FeFxRQdpkKrjCGrth был в списке, он бы отображался как

<iframe src="https://open.spotify.com/embed/album/08Cq2FeFxRQdpkKrjCGrth" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Таким образом, цикл for поместит URI в тег iframe.

Вот следующий код, который я имею, я уже просмотрел много учебных пособий и примеров в Интернете, но не могу понять это для такой ситуации.

var list = ["spotify:album:08Cq2FeFxRQdpkKrjCGrth"];
for (var i = 0; i < list.length; i++) {
    var source = list[i].split(":")[2];
    var iframe = document.createElement("iframe");
    iframe.src = source;
    iframe.width = "300";
    iframe.height = "380";
    iframe.frameborder = "0";
    iframe.allowtransparency = "true";
    iframe.allow = "encrypted-media";
    document.getElementById("demo").appendChild(iframe);
}

Answer 1

вот что я придумала. но вам нужно развернуть это на сервере, чтобы работать, или вы получите эту ошибку, независимо от того, что, даже если вы добавите песочницу. это необходимо развернуть на сервере с правильным URL-адресом http / https (локальный или IP-адрес не будет работать)

embed.2019-01-15_bcdc2b81.js:1 Uncaught DOMException: Failed to read the 'cookie' property from 'Document': The document is sandboxed and lacks the  

var list = ["spotify:album:1DFixLWuPkv3KT3TnV35m3"];
var url = "https://embed.spotify.com?uri="
for (var i = 0; i < list.length; i++) {
    var source =url + list[i]
    var iframe = document.createElement("iframe");
    iframe.src = source;
    iframe.width = "300";
    iframe.height = "380";
    iframe.frameborder = "0";
    iframe.allowtransparency = "true";
    iframe.allow = "encrypted-media";
    document.getElementById("demo").appendChild(iframe);
    
}

iframe{
border:1px solid red;
width:100%;
height:100%;
}

<div id="demo"></div>