HTML live Youtube

[ilcalicenero]

Salve.
Vorrei inserire sul mio sito un codice HTML per visualizzare le LIVE che trasmetto su Youtube senza ogni volta cambiare il codice fornito da YT.
Spero di essermi spiegato bene.
Grazie e buona giornata

[alemoppo]

Vedi qui:

https://www.youtube.com/embed/live_stream?channel=CHANNEL_ID

Ciao!

[ilcalicenero]

Grazie mille, darò un'occhiata

[ilcalicenero]

Purtroppo non sono riuscito a risolvere il problema.
Sono riuscito ad ottenere, tramite la guida fornita sopra, il link che mi indirizza alla live in maniera automatica.
Ho provato ad utilizzare tutti i codici forniti in quell'articolo insieme al codice fornito da Youtube stesso nell'area "Condividi > Embed" e sostituendo il link originale del vide specifico con il link che mi indirizza alla prima live disponibile, solamente che il player o diventa grigio o si crea un'area bianca, di fatto il player non viene mostrato sul sito.
Qualcuno sa aiutarmi per favore?
Grazie mille

[alemoppo]

solamente che il player o diventa grigio o si crea un'area bianca

Ma questo anche se c'è veramente una live?

Ciao!

[ilcalicenero]

Ma questo anche se c'è veramente una live?

Ciao!

Si, purtroppo

[alemoppo]

Sto vedendo dalla console che youtube ha impostato nell'header "X-Frame-Options" a sameorigin, strano visto che concede anche il codice html da condividere.



Hai incollato esattamente anche il codice che genera YouTube senza modificarlo?

Ciao!

[GraphOGLRisorse]

Salve,
provi riaaddattando questo codice libero:

<style>
   .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("img/yq7peaM.png") no-repeat;
        cursor: pointer;
    }
</style> 

<script>
    /* Light YouTube Embeds by @labnol */
    /* Web: http://labnol.org/?p=27941 */
    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });
    function labnolThumb(id) {
        var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }
    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }
</script>

<!-- modo di utilizzo -->
<div class="youtube-player" data-id="ID_VIDEO"></div>

Dovrebbe bastare sostituire nel js questo:

var embed = "https://www.youtube.com/embed/ID?autoplay=1";

con questo

var embed = "https://www.youtube.com/embed/live_stream?channel=ID";

Nel div per la visualizzazione del video, ID_VIDEO va sostituido col l'id nel suo caso del canale Youtube.

Questo codice non è mio. Lo scaricai tempo a dietro per caricare in una pagina di un mio sito dei video da Youtube in modo più semplice. Nel mio caso non si trattava di live, però con i normali video funziona attualmente.

Cordiali saluti.

[ilcalicenero]

Sto vedendo dalla console che youtube ha impostato nell'header "X-Frame-Options" a sameorigin, strano visto che concede anche il codice html da condividere.



Hai incollato esattamente anche il codice che genera YouTube senza modificarlo?

Ciao!

Il fatto che il link che indirizza alla live più recente o alla diretta poi si modifica con il link originale del video, non so come si chiama questo genere di link che cambia automaticamente, non ho la possibilità di condividere il codice HTML nell'area Embed del video perchè viene mostrato il link della LIVE in questione e se non lo modifico rimarrebbe sempre quel video in impressione sul mio sito

[ilcalicenero]

Salve,
provi riaaddattando questo codice libero:

<style>
   .youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("img/yq7peaM.png") no-repeat;
        cursor: pointer;
    }
</style> 

<script>
    /* Light YouTube Embeds by @labnol */
    /* Web: http://labnol.org/?p=27941 */
    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });
    function labnolThumb(id) {
        var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }
    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }
</script>

<!-- modo di utilizzo -->
<div class="youtube-player" data-id="ID_VIDEO"></div>

Dovrebbe bastare sostituire nel js questo:

var embed = "https://www.youtube.com/embed/ID?autoplay=1";

con questo

var embed = "https://www.youtube.com/embed/live_stream?channel=ID";

Nel div per la visualizzazione del video, ID_VIDEO va sostituido col l'id nel suo caso del canale Youtube.

Questo codice non è mio. Lo scaricai tempo a dietro per caricare in una pagina di un mio sito dei video da Youtube in modo più semplice. Nel mio caso non si trattava di live, però con i normali video funziona attualmente.

Cordiali saluti.

Grazie, darò un'occhiata e le farò sapere

[ilcalicenero]

Salve,
Ho seguito questa guida da lei fornita ma non sono riuscito a inserire il player. AL posto del player mi appare il riquadro grigio di Youtube.
Ho controllato diverse volte il codice e mi sembra che non ci siano errori in base alla guida da lei fornita.
Non so come fare.
Grazie

[GraphOGLRisorse]

Premesso che io quel codice l'ho usato/testato solo per video non live, poichè non dispongo di live, a rigor di logica, dovrebbe comunque addatarsi con quella modifica (potrei però sbagliarmi).

Crei una pagina di test, contente il codice che le ho fornito che carica una live e la stessa la live implementata nel modo più convenzionale (codice Youtube), quindi riporti qui il link. Così possiamo verificare se il problema della visualizzazione avviene a carattere generale o si presenta per qualche motivo solo a lei.

Cordiali saluti.

[ilcalicenero]

Premesso che io quel codice l'ho usato/testato solo per video non live, poichè non dispongo di live, a rigor di logica, dovrebbe comunque addatarsi con quella modifica (potrei però sbagliarmi).

Crei una pagina di test, contente il codice che le ho fornito che carica una live e la stessa la live implementata nel modo più convenzionale (codice Youtube), quindi riporti qui il link. Così possiamo verificare se il problema della visualizzazione avviene a carattere generale o si presenta per qualche motivo solo a lei.

Cordiali saluti.

Buongiorno, eccoci quà
Ho creato una pagina test come da lei richiesto, ho seguito nuovamente la guida da lei fornita sopra ma il problema persiste ancora.
Le lascio il link della pagina test, può cliccare qui
Grazie e buona giornata

[GraphOGLRisorse]

Nella pagina di test non ha modificato il codice come ho scritto:

Dovrebbe bastare sostituire nel js questo:

var embed = "https://www.youtube.com/embed/ID?autoplay=1";

con questo

var embed = "https://www.youtube.com/embed/live_stream?channel=ID";

Qui non doveva fare nulla di diverso dal rimpiazzare una riga con l'altra e non insrire il suo link qui.

Questa frase si riferisce al div del video:

Nel div per la visualizzazione del video, ID_VIDEO va sostituido col l'id nel suo caso del canale Youtube.

<!-- modo di utilizzo -->
<div class="youtube-player" data-id="ID_VIDEO"></div>

ID_VIDEO l'ho messo io al posto dell'id di un video e non è presente all'interno del codice js.

Ho fatto comunque delle prove con il link usato nella pagina di test e mi risulta non essere disponibile anche inserendolo nella barra degli url del browser.

Verifichi che il link sia scritto correttamente.

Cordiali saluti.

[ilcalicenero]

Nella pagina di test non ha modificato il codice come ho scritto:


Qui non doveva fare nulla di diverso dal rimpiazzare una riga con l'altra e non insrire il suo link qui.

Questa frase si riferisce al div del video:

<!-- modo di utilizzo -->
<div class="youtube-player" data-id="ID_VIDEO"></div>

ID_VIDEO l'ho messo io al posto dell'id di un video e non è presente all'interno del codice js.

Ho fatto comunque delle prove con il link usato nella pagina di test e mi risulta non essere disponibile anche inserendolo nella barra degli url del browser.

Verifichi che il link sia scritto correttamente.

Cordiali saluti.

Salve,
Ho tentato di nuovo di seguire la guida e correggere gli errori partendo dal codice originale, ho modificato come da lei consigliato ma continuo a non vedere il video. Tra poco ci sarà una diretta, vediamo se con la LIVE attiva il codice mostra qualcosa