Video embed su articolo blog
Autor: Veronica B.Buongiorno,
ho creato un articolo sul blog e ho inserito il codice youtube per il video incorporato.
Purtroppo, dopo averlo pubblicato non vedo il video.
Ho provato con tutti i browser.
Il codice inserito nell'articolo è il seguente
<iframe width="560" height="315" src="https://www.youtube.com/embed/q6e4IHwF-B0?si=XOCbfYdW0ztuT2fP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
e la pagina dove si dovrebbe vedere è questa
https://www.ritornoallessenziale.it/blog/index.php?blue-lotus,-uno-splendido-fiore-con-una-personalita-misteriosa
Nota: il campo ABILITA CODICE HTML è flaggato.
Potete aiutarmi?
Grazie
V.B.
---------------------
Avevo già fatto la segnalazione e avevamo risolto con KolAsim
... inizia con il togliere il codice EXTRA Pixel Code che tu hai inserito erroneamente nella prima opzione, prima del tag head...
...!... l'IFRAME YT pare bloccato dallo script Cookiebot...!...
Pero' ora c'e' altro che impedisce la visione del video embed.
Grazie,
Veronica
... il codice IFRAME presente nella pagina del BLOG è completamente diverso da quello che hai postato sopra...
... la pagina è in ERRORE; ... togli TUTTI i codici EXTRA che hai inserito tu là dove li hai inseriti, in particolare controlla le sezioni Esperto e SEO in tutte le opzioni disponibili nelle PROPRIETA' della/delle pagina speciale del BLOG...
...
... quando avrai fatto avvisa per andare a controllare...
.
ciao
.
.
Autor
Ciao, non posso togliere tutti i codici extra perche' mi servono.
Ho tolto quelle non più utili.
La parte nuova che ho aggiunto è quella di IUBENDA (dall'ultimo post).
... c'è ancora questo errore:
<!-- End GetResponse Analytics
<!-- poptin
<script id='pixel-script-poptin' src='https://cdn.popt.in/pixel.js?id=4c725602e6fd1' async='true'></script> -->
... una volta che avrai corretto avvisami così se la pagina non ha più errori e funziona potrò valutare la situazione, e nel caso ci risentiremo domani in giornata...
.
ciao
.
Autor
Ciao,il codice adesso è cosi'
<!-- End GetResponse Analytics-->
questa parte l'ho tolta
<!-- poptin
<script id='pixel-script-poptin' src='https://cdn.popt.in/pixel.js?id=4c725602e6fd1' async='true'></script>
... OK ... adesso la tua pagina non presenta più errori...
... ho potuto verificare, come avevo già notato in precedenza, che il codice IFRAME in uso nella pagina è corrotto...
... ho controllato ed il codice IFRAME del tuo primo Post è corretto e regolare, quindi se incolli quello non dovresti avere problemi...
...
... il codice corrotto-falso che non può assolutamente funzionare e che hai attualmente in uso nel testo di quella pagina è questo: (!)
<iframe width="560" height="315" src="about:blank" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" class="_iub_cs_activate cmplazyload" data-suppressedsrc="https://www.youtube.com/embed/q6e4IHwF-B0?si=XOCbfYdW0ztuT2fP" data-iub-purposes="3,s" data-cmp-ab="2" data-cmp-src="https://www.youtube.com/embed/q6e4IHwF-B0?si=XOCbfYdW0ztuT2fP" data-cmp-info="11" style="" data-cmp-vendor="179"></iframe>
.
ciao
.
... se non ci riesci, si potrebbe sopperire alla lacuna con una mia invenzione con codice EXTRA, e nel caso ti interessasse, avvisami...
.
Autor
Ciao, è chiaro cosa sta succedendo.
E' IUBENDA che inserisce la parte di codice errata, guarda l'allegato.
La parte di codice del primo post non è mai stata modificata.
Se riusciamo a superare l'errore col tuo codice extra per me va bene.
Altrimenti tolgo il video.
Grazia, ciao
Veronica
... OK ... per quella Pagina e per le Proprietà della pagina Speciale del BLOG, 3^opzione (/HEAD):
<script>
/** video load EXTRA YT x WSx5 art BLOG by KolAsim -- **/
$( document ).ready(function() {//K>;
preloadK = "https://cdn.pixabay.com/animation/2022/07/29/03/42/03-42-18-223_256.gif";
$("#imBlogPost_000000055 iframe").css("background","url("+preloadK+")no-repeat center center")
setTimeout(function(){ //K1>;
pagina_blogK = "blue-lotus-uno-splendido-fiore-con-una-personalita-misteriosa";
estraenomepaginaK = window.location.href.split('?');
estraenomepaginaK = estraenomepaginaK[estraenomepaginaK.length - 1];
if( estraenomepaginaK == pagina_blogK ) {//K2>;
$("iframe").attr("src","https://www.youtube.com/embed/q6e4IHwF-B0?si=XOCbfYdW0ztuT2fP")
}; //K2<<;
}, 3000); //K1<<;
}); //K<<;
</script>
.
ciao
.
Autor
Grazie mille, ho risolto anche per un altro video modificando il tuo script.
Ciao, Veronica
... ottimo! ... OK ... visto ... funziona ...
... nel codice IFRAME sostituisci width="560" ... con width="100%" ... per non tagliare il video alle risoluzioni inferiori a 720px...
.
ciao
.
Autor
Grazie mille, ho fatto la modifica ma non mi piace come rimane.
Ti mando i link dei 2 articoli del blog con video così vedi il risultato.
https://www.ritornoallessenziale.it/blog/index.php?olio-essenziale-di-tea-tree
https://www.ritornoallessenziale.it/blog/index.php?blue-lotus-uno-splendido-fiore-con-una-personalita-misteriosa
Ciao,
Veronica
... ho capito, era per poter far vedere il video per intero e non tagliato nelle risoluzioni inferiori...
... allora puoi rimettere il valore width iniziale ed aggiungere prima dello stesso codice IFRAME questa stringa, che agisce solo nelle risoluzioni inferiori a 720px...
<style> @media(max-width:720px) {iframe{width:100% !important}}</style>
.
ciao
.
Autor
Perfetto, grazie mille. Ora va benissimo.
Ciao,
Veronica
... ho visto ... OK ... funziona bene ...
... se ti può interessare e se ti servisse usare più video in pagine diverse, ... con una mia vecchia invenzione (da testare!), basata sulla lista delle pagine e dei video YT, e su un mini DIV_CUSTOM da inserire come segnaposto nel testo del BLOG, forse sarebbe possibile usare un unico codice script che posizionerebbe il mio IFRAME dinamicamente, (non quello di YT), quindi fuori dal controllo dei cookie, e senza inserire l'IFRAME nel testo come fatto adesso, ...ma nel caso come detto sarebbe da testare con partecipazione attiva...
.
ciao
.
Autor
Si, possiamo provare!
.... OK ... quindi non inserire l'IFRAME...
... prendi quattro pagine diverse del BLOG per fare queste prove...
1) - nell'area di testo di queste pagina in cui vuoi far apparire il video YT metti questa stringa di codice come ferma posto. così io posso poi valutare:
<br><div class="divytK" style="position:relative;text-align:center;background-color:yellow"> - K - </div><br>
... quando avrai fatto avvisami, postando il nome di queste quattro pagine, o il LINK , ed anche il relativo LINK del video YT da associare; ... se non hai già pronti i video, fa niente, ne userò quattro altri dalla rete YT...
... non dovrebbe essere difficile e se stai al tempo ne occorrerebbe poco...
.
Autor
Ciao,
ho preparato 4 pagine. All'interno c'è il codice che mi hai indicato.
Prova 1: https://www.ritornoallessenziale.it/blog/index.php?prova-1
https://www.youtube.com/watch?v=13J3jfFzBNE
Prova 2: https://www.ritornoallessenziale.it/blog/index.php?prova-2
https://www.youtube.com/watch?v=mCWwdSx2WkM
Prova 3: https://www.ritornoallessenziale.it/blog/index.php?prova-3
https://www.youtube.com/watch?v=JO9C3LEpY9w
Prova 4: https://www.ritornoallessenziale.it/blog/index.php?prova-4
https://www.youtube.com/watch?v=CyDGWhywJSE
Il codice per i link a youtueb non li ho messi nelle pagine del BLOG.
Ciao
Veronica
... OK ... visto ... controllo ... e poi ritorno...
... grazie per esserti prestata per i Test......
... in teoria la mia invenzione è una bomba, semplice ed esclusiva, e non affatica la pagina in apertura con il download di YT ed esente da jubenda...
... ovviamente si potrà valutare realmente una volta riesportato online, sperando senza imprevisti e senza dover applicare eventuali ulteriori ritardi...
... ecco il codice da mettere in sostituzione del mio precedente script:
<script>
$(document).ready(function () {//K>;
/** -- esclusivo video YT dinamico x BLOG WSx5 by KolAsim -- **/
//--- lista nomi di pagina ---;
paginaBlogK= [
"prova-1",
"prova-2",
"prova-3",
"prova-4"
]
//--- lista dei relativi video YT ---;
videoYTK = [
"https://www.youtube.com/embed/13J3jfFzBNE",
"https://www.youtube.com/embed/mCWwdSx2WkM",
"https://www.youtube.com/embed/JO9C3LEpY9w",
"https://www.youtube.com/embed/CyDGWhywJSE"
]
//-------------------------------------
preloadK = "https://cdn.pixabay.com/animation/2022/07/29/03/42/03-42-18-223_256.gif";
styleytK = '<style> .divytK{background:url("'+preloadK+'") no-repeat center center;'+
'background-size:100px 100px !important}'+
' @media(max-width:720px) {#iframeK{width:100% !important}}</style>';
$("head").append(styleytK);
//-------------------------------------
estraenomepaginaK = window.location.href.split('?');
estraenomepaginaK = estraenomepaginaK[estraenomepaginaK.length - 1];
k= paginaBlogK.indexOf(estraenomepaginaK) ;
iframeK='<div style="position:relative"><iframe id="iframeK" width="560" '+
' height="315" src="" allowfullscreen></iframe></div>';
$(".divytK").html(iframeK)
//-------------------------------------
setTimeout(function(){//K1>;
$("#iframeK").attr("src",videoYTK[k])
}, 3000);//K1<<;
}); //K<<;
</script>
.
... una volta che hai provato con risultato positivo se vuoi puoi eliminare nel DIV_CUSTOM la parte che vedi qui in grassetto, ed anche il testo "-K -":
<br><div class="divytK" style="position:relative;text-align:center;background-color:yellow"> - K - </div><br>
.
ciao
.
ps: ... eventualmente ci aggiorneremo domani in giornata...
.
Autor
Ciao, ho messo il codice in Prova-1 ma non si vede nulla
.. nel testo della pagina manca il mio DIV_CUSTOM ... che prima si vedeva coma una striscia gialla, che è la chiave della mia idea...
cioè manca questo:
<br><div class="divytK" style="position:relative;text-align:center;background-color:yellow"> - K - </div><br>
... non c'è neanche il codice...!...
Autor
c'e' tutto, avevo solo tolto il primo pezzo. Ora l'ho rimesso.
In tutte le pagine c'e' questo codice
Prova X
<br><div class="divytK" style="position:relative;text-align:center;background-color:yellow"> - K - </div><br>
<script>
$(document).ready(function () {//K>;
/** -- esclusivo video YT dinamico x BLOG WSx5 by KolAsim -- **/
//--- lista nomi di pagina ---;
paginaBlogK= [
"prova-1",
"prova-2",
"prova-3",
"prova-4"
]
//--- lista dei relativi video YT ---;
videoYTK = [
"https://www.youtube.com/embed/13J3jfFzBNE",
"https://www.youtube.com/embed/mCWwdSx2WkM",
"https://www.youtube.com/embed/JO9C3LEpY9w",
"https://www.youtube.com/embed/CyDGWhywJSE"
]
//-------------------------------------
preloadK = "https://cdn.pixabay.com/animation/2022/07/29/03/42/03-42-18-223_256.gif";
styleytK = '<style> .divytK{background:url("'+preloadK+'") no-repeat center center;'+
'background-size:100px 100px !important}'+
' @media(max-width:720px) {#iframeK{width:100% !important}}</style>';
$("head").append(styleytK);
//-------------------------------------
estraenomepaginaK = window.location.href.split('?');
estraenomepaginaK = estraenomepaginaK[estraenomepaginaK.length - 1];
k= paginaBlogK.indexOf(estraenomepaginaK) ;
iframeK='<div style="position:relative"><iframe id="iframeK" width="560" '+
' height="315" src="" allowfullscreen></iframe></div>';
$(".divytK").html(iframeK)
//-------------------------------------
setTimeout(function(){//K1>;
$("#iframeK").attr("src",videoYTK[k])
}, 3000);//K1<<;
}); //K<<;
</script>
... son ritornato ... ...
... NO!... non hai seguito le istruzioni, per esempio questa:
... cioè nella sezione /HEAD dove hai inserito altri due script, da eliminare...
... hai inserito il DIV_CUSTOM segnaposto e script tutto nel testo, e non va bene...
... nel testo va solo il DIV_CUSTOM segnaposto per il video YT e senza altri codici...
... lo script va nella sezione Esperto | /HEAD...
..... AZZERIAMO TUTTO e ricominciamo da capo PASSO-PASSO... un passo alla volta......
.
... PASSO_1
1a) ... nella sezione Esperto /HEAD ... elimina i due script attuali;
1b) ... per un'azione globale, ...nel testo delle pagine precedenti contenenti il codice style ed iframe, elimina tutto il codice esistente nel testo, praticamente togliendo i video attuali nelle pagine > blue-lotus-*** > olio-essenziale-***, ...ed eliminare anche il codice nellle pagina prova-1,-2,-3,-4;
1c) ... nel testo di tutte le pagine in cui vuoi inserire il video, le precedenti blue-lotus-***, olio-essenziale-***, e le nuove prova-1,-2,-3,-4, inserisci la dove vuoi far apparire il video YT solo questo codice segnaposto:
<br><div class="divytK" style="position:relative;text-align:center;background-color:silver"> - K - </div><br>
...
...ricapitolando questo PASSO_1:
1a) ... elimina miei codici script in /HEAD
1b) ... elimina nel testo gli attuali IFRAME e tutti gli altri codice EXTRA di questo Topic;
1c) ... inserisci nel testo il solo codice segnaposto
.
... quando hai ripulito e pubblicato con le modifiche, avvisami, ... per continuare con il finale PASSO_2...
.
ciao
.
.. intanto ti anticipo la lista video YT che poi sarà usata nel PASSO_2:
.
Autor
OK, PASSO 1 FATTO E FUNZIONA PER LE PAGINE PROVA 1 2 3 4 (si vede il video).
NELLE PAGINE BLUE LOTUS E TEA TREE NO PERCHE' MANCA IL PASSO 2.
MANDAMI IL CODICE COSI' LO INSERISCO.
Grazie,
Ciao, Veronica
.. OK .. brava ... controllo meglio e poi ritorno ...
... PASSO_2
... adesso in /HEAD puoi togliere :
<!-- INIZIO PARTE COMMENTATA *** FINE PARTE COMMENTATA-->
... e togli anche lo SCRIPT nel stotto al commento:
<!-- SCRIPT NUOVO PER GESTIRE VIDEO -->
... in /HEAD al posto di quei codici puoi usare questo codice UNICO con la lista per tutte le pagine:
<script>
$(document).ready(function () {//K>;
/** -- esclusivo video YT dinamico x BLOG WSx5[265640] by KolAsim -- **/
//--- lista nomi di pagina ---;
paginaBlogK= [
"blue-lotus-uno-splendido-fiore-con-una-personalita-misteriosa",
"olio-essenziale-di-tea-tree",
"prova-1",
"prova-2",
"prova-3",
"prova-4"
]
//--- lista dei relativi video YT ---;
videoYTK = [
"https://www.youtube.com/embed/q6e4IHwF-B0?si=XOCbfYdW0ztuT2fP",
"https://www.youtube.com/embed/XO-3zm8XzIw",
"https://www.youtube.com/embed/13J3jfFzBNE",
"https://www.youtube.com/embed/mCWwdSx2WkM",
"https://www.youtube.com/embed/JO9C3LEpY9w",
"https://www.youtube.com/embed/CyDGWhywJSE"
]
//-------------------------------------
preloadK = "https://cdn.pixabay.com/animation/2022/07/29/03/42/03-42-18-223_256.gif";
styleytK = '<style> .divytK{background:url("'+preloadK+'") no-repeat center center;'+
'background-size:100px 100px !important}'+
' @media(max-width:720px) {#iframeK{width:100% !important}}</style>';
$("head").append(styleytK);
//-------------------------------------
estraenomepaginaK = window.location.href.split('?');
estraenomepaginaK = estraenomepaginaK[estraenomepaginaK.length - 1];
k= paginaBlogK.indexOf(estraenomepaginaK) ;
iframeK='<div style="position:relative"><iframe id="iframeK" width="560" '+
' height="315" src="" allowfullscreen></iframe></div>';
$(".divytK").html(iframeK)
//-------------------------------------
setTimeout(function(){//K1>;
$("#iframeK").attr("src",videoYTK[k])
}, 3000);//K1<<;
}); //K<<;
</script>
.
... poi avvisami per controllare...
.
ciao
.
... se vuoi puoi cambiare il colore di sfondo GRIGIO (silver) in colore più tenue, o senza colore di sfondo, ed eventualmente avvisami...
Autor
fatto.
Si, il colore di sfondo lo vorrei trasparente
Grazie!
... OK ... togli la parte in grassetto:
<br><div class="divytK" style="position:relative;text-align:center;background-color:silver"> - K - </div><br>
... praticamente elimina: background-color:silver
<br><div class="divytK" style="position:relative;text-align:center"> - K - </div><br>
.
... ho controllato quelle pagine del BLOG, ...direi PERFETTO .. ... ciao
Autor
PERFETTO, GRAZIE MILLE!
ABBIAMO FATTO UN OTTIMO LAVORO.
Ciao,
Veronica
... visto, ottimo! ... grazie anche a te ... che sei stata al passo e ti sei prestata per i Test...
... questa invenzione semplificherebbe per tutti quelli che leggeranno qui l'inserimento di YT negli articoli del Blog con script cookie (o senza)...
.
ciao
.
.
... p.s.:
... quando e se vorrai fare un nuovo Test, forse più flessibile, che permetterebbe anche di inserire più video YT nella stessa pagina del Blog, ...avvisami...
.
Autor
Va bene, quando vuoi proviamo!
OT: con tutto il lavorone svolto dal sempre presente e gentilissimo KolAsim, Veronica direi che qualche feedback sarebbe bello e meritato.
... OK ... così potremo valutare e sapere se è compatibile anche con jubenda......
... come fatto prima ed al posto del precedente metodo, ... nella posizione del testo dell'articolo del Blog, là dove si vuol far apparire il video YT, mettere questo mio nuovo codice per il DIV_CUSTOM "segnaposto" per il video:
<!-- incorporamento video YT per WSx5 BLOG by KolAsim -->
<hr><div id="XO-3zm8XzIw" class="videoYTK" style="position:relative;width:100%;height:300px">
<img class="controlloK" src="https://cdn.pixabay.com/photo/2015/12/22/04/00/eye-1103593_640.png" onload='idYTK=$(this).parent().attr("id");divYTK="#"+idYTK;caricaiframeYTK(divYTK,idYTK)' width="1">
</div><hr>
.
ciao
.
... e questo è lo SCRIPT per la sezione Esperto | /HEAD ...in sostituzione del precedete:
<script>
/** -- funzione x video YT dinamico x BLOG WSx5[265640](2) by KolAsim -- **/
function caricaiframeYTK(divYTK ,idYTK) {//K1>;
wK= "100%"; // larghezza (width) IFRAME;
hK= 300; // altezza (height) IFRAME;
iframeK='<iframe width="'+ wK +'" height="' + hK + '" src="https://www.youtube.com/embed/'+idYTK+'"></iframe>';
$(divYTK).html(iframeK)
} ; //K1<<;
</script>
.
... la chiave che permette di usare vari video sta nel codice ID del video YT, da riportare unicamente, segnaposto per segnaposto nello ID stesso del DIV contenitore
<hr><div id="XO-3zm8XzIw" ...eccetera eccetera
... in questo modo basta inserire il segnaposto col suo ID senza dover aggiornare anche lo SCRIPT che rimarrà unico, come invece avverrebbe col precedente codice per dover aggiornare anche la lista dei video in head, qui non più necessaria...
.
... nel tag <IMG> del segnaposto ti consiglio di usare una qualsiasi tua immagine o icona che sia, del tuo stesso sito; ...per esempio per usare la tua immagine "nomeimmagine.png" posizionata nella cartella "files" del tuo sito, l'attributo SRC diventerebbe così:
<img class="controlloK" src="files/nomeimmagine.png" eccetera eccetera ... ... ...
... ovviamente questo tag <IMG> rimarrà sempre lo stesso senza modifiche in tutti i segnaposto...
.
... grazie a Giancarlo per aver apprezzato ...
.
Autor
Ciao KolAsim, non sono ancora riuscita a fare le prove col nuovo codice.
Adesso rimango ferma con la prima versione, ben funzionante.
Appena rimetto mano al sito cerco di provare l'ultimo codice che mi hai inviato.
Grazie, ciao,
Veronica
... ciao, ... non ti preoccupare, quando vorrai farai le prove e mi dirai, ... ... intanto dal Forum tedesco ho anche ripescato una mia precedente e esclusiva invenzione con lo ShowBox, più leggera in caso di presenza di più YT nello stesso articolo...
.
ciao
.