Qui il codice responsive e inserito in griglia bootstrap a 3 colonne che poi diventano 1 se qualcuno volesse già prelevarlo bell'e pronto.
<div class="grid">
<div class="row">
<div class="col-12 col-lg-4">
<div class="respon"><iframe class="latestVideoEmbed" vnum='0' cid="sostituire-con-id-canale" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<p id="video-title">Lorem ipsum</p></div>
</div>
<div class="col-12 col-lg-4">
<div class="respon"><iframe class="latestVideoEmbed" vnum='1' cid="sostituire-con-id-canale" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<p id="video-title">Lorem ipsum</p></div>
</div>
<div class="col-12 col-lg-4">
<div class="respon"><iframe class="latestVideoEmbed" vnum='2' cid="sostituire-con-id-canale" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<p id="video-title">Lorem ipsum</p></div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>var reqURL = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id=");
function loadVideo(iframe) {
jQuery.getJSON(reqURL + iframe.getAttribute('cid'),
function(data) {
var videoNumber = (iframe.getAttribute('vnum') ? Number(iframe.getAttribute('vnum')) : 0);
console.log(videoNumber);
var link = data.items[videoNumber].link;
var title=data.items[videoNumber].title;
id = link.substr(link.indexOf("=") + 1);
iframe.setAttribute("src", "https://youtube.com/embed/" + id + "?controls=0&autoplay=0");
iframe.parentElement.querySelector("#video-title").innerText = title;
}
);
}
var iframes = document.getElementsByClassName('latestVideoEmbed');
for (var i = 0, len = iframes.length; i < len; i++) {
loadVideo(iframes[i]);
}
</script>La classe per la responsività è
.respon{position:relative;width:100%;height:0;padding-bottom:56.27198%;}
.respon iframe{position:absolute;top:0;left:0;width:100%;height:100%;}vnum='
numero' ci permettere di caricare in ordine cronologico inverso i video del canale (0 = ultimo, 1 = penultimo, 2 = terzultimo) e così via... Dopo vnum,
cid deve corrispondere all'id del canale
Il caricamento non è velocissimo, ma dato che sta su una sola pagina, pazienza...
Se poi si riuscisse a integrare
questa guida con lo stesso codice sarebbe proprio una favola e si velocizzerebbe il tutto... ma mi sembra difficile, per come funziona il sistema della guida joomla (mi pare siano due meccanismi incompatibili). La comodità del codice è che non bisogna stare lì a caricare manualmente gli ultimi video pubblicati, ma vanno in automatico...
Lo script fuori dall'articolo non funziona neanche a me.
In alternativa puoi provare a fare un nuovo file js e richiamarlo nell'header del template.
Ci proverò e ti farò sapere, ma non saprei neanche da dove cominciare, quindi prima mi toccherà studiare.
Se poi qualcuno più esperto di js ci saprà dire dove potrebbe essere l' "inghippo" dell'extra pagina
Grazie a tutti
