Rendere responsive gli Iframe video nel Blog 
Autore: Gabriele D.Salve a tutti, avrei un problema da risolvere, se qualcuno potesse gentilmente aiutarmi.
Dopo aver reso responsive il mio sito web, mi sono accorto che i video inseriti in alcuni articoli del blog non si adattavano alle dimensioni della finestra del browser. Una pagina di esempio:
http://www.gabrieledanesi.com/blog/index.php?id=e1a4qwf2
Leggendo qua e là, ho capito che il problema sta nel tag "iframe", che deve essere reso responsive tramite inserimento di una classe CSS. Sostanzialmente qualcosa di questo tipo:
.video-responsive {
position: relative;
padding-bottom: 56.25%
height: 0;
overflow: hidden;
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
witdh: 100%;
height: 100%;
}
<div class="video-responsive">
<iframe src="link" allowFullScreen></iframe>
</div>
Arrivo quindi alle domande:
1) Innanzitutto il codice che ho inserito come esempio può essere corretto ?
2) Come posso inserire quella classe all'interno di Website ? Può essere inserita direttamente all'interno dell'articolo del blog attivando l'inserimento di codice HTML ? E in tal caso, per farlo funzionare, vanno usati tag aggiuntivi oltre a quanto ho già scritto ?
Scusate se le domande potrebbero sembrare banali, ma sono completamente inesperto di codice HTML e CSS... ho provato ad inserire quelle righe all'interno dell'articolo del blog ma non ho ottenuto il risultato sperato.
3) Qualcuno conosce alternative più semplici per rendere responsive l'iframe di un video vimeo o youtube ?
Ringrazio anticipatamente per l'aiuto !
.
... nell'IFRAME al posto di width="960" ... metti width="100%"
<iframe src="http://player.vimeo.com/video/9953368?title=0&byline=0&portrait=0" width="100%" height="540" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
.
io avevo provato questo e mi funzionava....in oggetto html:
<div class="video-container">
<iframe width="420" height="315" src="https://www.youtube.com/embed/aHonTbqJr9U" frameborder="0" allowfullscreen></iframe>
</div>
e nel CSS dell'oggetto:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Autore
Allora, ho provato la soluzione molto semplice proposta da KolAsim. In effetti il ridimensionamento adesso funziona, però rimane il vincolo sull'altezza della finestra (che è impostata ad un valore fisso).
Ho provato ad inserire questa soluzione in questa pagina del blog:
http://www.gabrieledanesi.com/blog/index.php?id=80b9u6h8
Però mi piacerebbe che anche l'altezza della finestra si adattasse alle dimensioni del browser. Ho così provato a modificare il valore height all'interno dell' iframe (ho provato a metterci 0, poi 100%, poi 56.25%) ma ovviamente non funziona ! (come ho detto precedentemente sono del tutto a digiuno di programmazione, quindi se dico stupidate perdonatemi !).
-----
La soluzione proposta da Mirko mi sembra invece più simile a quella che avevo letto anch'io. Per testarla, però, il mio problema sarebbe capire dove inserire quel codice. Nel senso... il <div> contenente l' <iframe> lo inserisco nella pagina contenente l'articolo del blog, e fin qui penso di esserci. Ma il CSS dell'oggetto dove va messo ?
Ringrazio sinceramente per gli aiuti offerti finora.
Gabriele
... secondo me dovrebbe poter andar bene, per come visto per altri suggerimenti simili da me dati per YT, ove nel caso di rapporti non congrui verrebbe a crearsi una vignettatura superiore/inferiore che non darebbe fastidio...
... oppure, prova con una mia invenzione, postata spesso con i miei esempi, purtroppo andati estinti, ma a cui si può risalire da questo Topic, https://helpcenter.websitex5.com/it/post/153633 ...da adattarsi per lo scopo, dovrebbe risultare semplice, e/o casomai se ne riparlerà dopo se incontrerai difficoltà e magari postando il link dell'esempio...
.
Autore
Dunque... credo di essere riuscito a implementare correttamente il metodo con lo stile CSS, proposto anche da Mirko.
Sostanzialmente ho aggiunto lo stile CSS nella HEAD usando il tag <style>. Questa era l'operazione che non capivo come fare. Ho fatto qualcosa di sensato mettendolo lì ?
Quindi, ho inserito "prima della chiusura della HEAD":
<style>
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
E poi, all'interno dell'articolo del Blog, ho usato la seguente stringa:
<div class="video-responsive"><iframe src="link" allowFullScreen></iframe></div>
Vedendo la solita pagina di esempio:
http://www.gabrieledanesi.com/blog/index.php?id=80b9u6h8
sembra fuznionare correttamente.
Ora... ammesso che ciò che ho fatto sia corretto... quello che mi viene da pensare è che in effetti questo stile CSS lo utilizzo in solo 3 o 4 articoli del blog e basta. Mi sembra perciò una forzatura avere quelle righe di codice inserite nella HEAD di ogni pagina del sito. E' possibile alleggerire il tutto inserendole da qualche altra parte ?
... ottimo, vedo che ti funziona abbastanza bene, e sembra al livello dei miei vecchi esempi...
... ... con i miei codici si poteva usare solo l'Oggetto Codice HTML, per quel che mi ricordi...
... se riesco ad avviare il vecchio catorcio senza perderci tempo, magari ti posterò i miei esperimenti, più tardi...
.
... pensavo peggio; ...ecco gli esempi con il tuo video:
http://www.kolasim-zone.it/iframe/iframe_elastico_jsk.html
http://www.kolasim-zone.it/iframe/iframe_elastico_cssk.html
... ... Ctrl+U per vedere e selezionare il codice evidenziato, e poi devi solo fare copia/incolla direttamente nell'Oggetto Codice HTML; ...anche se non ho il programma, dovrebbero funzionarti tutti e due i codici...
... dove vedi il valore 56% ...è il rapporto ratio H/W sulle misure originali del tuo Video (540/960), ...quindi in caso di video con rapporti diversi basta variarlo...
... grazie per avermi fornito lo spunto per recuperarli...
.
Autore
Ho provato a copia/incollare il codice di entrambi i tuoi due esempi... ma purtroppo non funzionano. Dato che nelle tue semplici pagine HTML pulite funzionano benissimo... mi viene da pensare... o che sia la struttura interna alla pagina del blog che non li faccia funzionare correttamente... o che ho sbagliato qualcosa io (ma non credo dato che mi sono limitato a copiare il contenuto compreso tra i due commenti DIV_CUSTOM ed incollarlo nella pagina del blog).
Per ora ho quindi mantenuto la modifica precedente con lo stile CSS.
Per evitare di applicare lo stile CSS alla HEAD di ogni pagina web forse si potrebbe pensare di applicarlo direttamente all'interno del <div><iframe>, ossia solo dove serve... ma è un'idea che mi è venuta in mente senza sapere né come farlo, né se sia possibile farlo !
... il mio codice funziona già così ...
... sul fatto che non ti funga, dovresti postare il link con questa modifica per poterlo valutare, non potendo farlo io che non posso provare con il programma, anche per poter capire eventualmente dove poter intervenire/correggere...
.
.
Autore
Dopo una mattinata di test... sono arrivato alle seguenti conclusioni:
1) Innanzitutto ho capito che il modulo Blog di Website X5 andrebbe davvero rivisto dallo staff, perchè è la rovina dell'intero programma. Personalizzabile infima e limitatissimo in tutto. Ma la cosa davvero fastidiosa è che, ad ogni inserimento di una nuova riga di testo all'interno dell'articolo del blog, il programma crea valanghe di <div> e <span> senza senso e che spesso si incastrano alle righe di codice HTML inserite, facendole così non funzionare !
2) Le righe di codice da te proposte, KolAsim, funzionano bene su una pagina vuota, ma inserite nel blog vanno a posizionare il video sopra il testo dell'articolo (nascondendolo) e sopra alle funzioni relative all'inserimento di commenti. Questo è il motivo per cui non l'ho lasciato attivo in una pagina da linkare qui come esempio.
3) Grazie al codice della tua pagina "iframe_elastico_cssk", da cui ho preso spunto sulla sintassi, credo di aver capito come inserire lo stile CSS all'interno del <div> e dell' <iframe>.
Sostanzialmente ho dunque preso le modifiche funzionanti, che precedentemente avevo messo nella HEAD, per arrivare a questa sintassi definitiva:
<div style="position: relative; height: 0; padding-bottom: 56.25%; overflow: hidden;"><iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="link_del_video" allowFullScreen></iframe></div>
Con tale riga di codice interna all'articolo del blog tutto funziona correttamente... nessun codice supplementare nella HEAD... ed ho anche il padding-bottom da dimensionare manualmente caso per caso a seconda delle dimensioni del video.
Esempio: http://www.gabrieledanesi.com/blog/index.php?id=80b9u6h8
Esempio: http://www.gabrieledanesi.com/blog/index.php?id=3o6fke99
Ringrazio chiunque sia intervenuto nella discussione per i consigli e l'aiuto fornito.
Gabriele
... in pratica è il mio precendentemente postato (cssk), hai aggiunto overflow che nel mio esempio non serve, e non hai fatto uso dell'allineamento top/left che nel mio caso serve per riempire totalmente la finestra o il div contenitore...
... ... e comunque, ottimo risultato e riscontro, e grazie per il test e conferma...
.