Codice Extra in Blog > Ifram youtube 
Autore: Stiac Engineering
Visite 680,
Followers 3,
Condiviso 0
Salve ragazzi,
stavo provando a inserire del codice extra in un articolo del blog WebSite X5, nello specifico vorrei poter mettere un iframe di YouTube con del CSS per renderlo responsive.
Ho buttato giù due righe di codice qui, tuttavia quando lo inserisco in WebSite X5 non funziona.
Avevo letto tempo fa di una miglioria relativa la compatibilità. Sto sbagliando qualcosa?
Postato il
Ciao Gabriele avevo fatto un test tempo fà però con un video in locale
https://www.giancarloweb.it/template/test-video/index.html
... sul blog utilizzando il codice di youtube a me sembra già responsive
https://www.giancarloweb.it/blog/index.php?tutorial-wowslider
però probabilmente non ho capito bene io
Autore
Buongiorno e grazie per la partecipazione.
Ho provato a inserire il codice iframe dato da YouTube tuttavia ho notato che da mobile questo viene tagliato.
Ad esempio:
Mentre quello con il codice CSS che ne modifica la dimensione sfruttando la percentuale si adatta perfettamente.
Il mio intento era quello di contenere le dimensioni da Desktop e renderlo adattabile da Mobile, in prativa evitare che diventi troppo grande da PC e che vada fuori pagina da Cellulare.
Devi lavorare con i @media screen allo schermo pc gli assegni larghezza 50% 0 70% (fai prove e vedi tu come ti piace di più) mentre su smartphone 100%
Comunque il codice che hai postato tu a me funziona bene senza fare modifiche
Autore
Ti posso domandare la gentilezza d'indicarmi come l'hai inserito?
Nella rticolo insersci il codice video
<div class="stiac-iframe-container"><iframe class="stiac-responsive-iframe" src="https://www.youtube.com/embed/uI7sZmFkR_w"></iframe></div>
Mentre al passo 3 nella pagina blog articolo in esperto prima della chiusura del tag HEAD inserisci il css dentro <style></style>
<style>
.stiac-iframe-container {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.stiac-responsive-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 660px;
max-height: 371px;
border: none;
margin: 0 auto;
}
</style>
Autore
Grazie! Anche io ho fatto così. Forse c'è qualche codice in contrasto.
Sicuramente perchè a me funziona, se vuoi ti pubblico la mia prova... Fammi sapere
Autore
Buongiorno! Gentilissima come sempre.
Credo di aver risolto anche se non mi spiego la difficoltà iniziale. L'altro giorno ho provato come mi hai indicato tu e visualizzavo tutto bianco. Oggi stranamente funziona.
L'ho inserito per prova in questo articolo. Ringrazio di cuore te e il caro Giancarlo per l'aiuto.