Dimensionamento width e height di un video

[Hans Castorp]

Ciao a tutti.
Il tema di Wordpress che sto utilizzando permette l'inserimento di video da youtube; tuttavia ho bisogno di modificarne il comportamento al restringersi e all'allargarsi della finestra. Cosa che il tema non fa in automatico. Mi dà problemi soprattutto l'attributo height.
Ho ragionato in questo modo, lavorando esclusivamente con jQuery:
1. Ho impostato la width dell'iframe a 100%, in modo che si adatti alla finestra, ponendomi l'obiettivo di andare a modificare anche l'height in modo dinamico.
2. Tramite la funzione $("iframe").width() riesco a rilevare la larghezza reale del video;
3. Impostando una variabile, dico di prendere il valore della width e dividerlo per 1.7 per ottenere il valore dell'height;
4. Impostando un'altra variabile, assegno l'height così calcolata al frame, in modo da metterla sempre proporzionata.

Il problema è che il sistema funziona bene soltanto ad ogni refresh, mentre io vorrei che lo facesse anche al resize della finestra. Qualcuno ha qualche idea?

Il sito è questo;

Lo script che ho usato è questo:

<script>





$(document).ready(function(){








$(".fusion-video iframe, iframe").removeAttr("width");


$(".fusion-video iframe, iframe").removeAttr("height");


$(".fusion-video iframe, iframe").attr


    ({"style" : "width:100% !important"});


$(".fusion-video, .fusion-youtube").attr


    ({"style" : "max-width:100% !important"});





var larghezzavideo = $("iframe").width();


var altezzavideo = $("iframe").height();


var altezzavideomod = larghezzavideo / 1.782;


var altezzavideoarr = Math.round(altezzavideomod);





$("#prova-tasto").click(function()


    {


    alert(larghezzavideo);


    alert(altezzavideoarr);


    });





$(".fusion-video iframe, iframe").attr


    ({"height" : altezzavideoarr});








});


</script>

Cliccando sul tasto escono alert con valori di width e height

[Hans Castorp]

Scusate non ho inserito il codice correttamente, e non riesco a modificarlo tramite "modifica messaggio". Eventualmente chiudete che riscrivo tutto.

[lucavizzi]

Ciao Hans Castorp,
Per rispondere nel merito della tua domanda, le istruzioni che hai racchiuso nella funzione ready() andrebbero spostate all'interno di una funzione, funzione che poi dovresti richiamare sia nell'evento document.ready (come fai ora) che nell'evento window.resize.

A sensazione, dovrebbe essere possibile risolvere la cosa con i soli CSS; verifica anche, nella documentazione, che la responsività per i video non sia una funzionalità già offerta dal plug-in.

P.S.: Non preoccuparti per la formattazione del primo messaggio.

[Hans Castorp]

Ciao Hans Castorp,
Per rispondere nel merito della tua domanda, le istruzioni che hai racchiuso nella funzione ready() andrebbero spostate all'interno di una funzione, funzione che poi dovresti richiamare sia nell'evento document.ready (come fai ora) che nell'evento window.resize.

A sensazione, dovrebbe essere possibile risolvere la cosa con i soli CSS; verifica anche, nella documentazione, che la responsività per i video non sia una funzionalità già offerta dal plug-in.

P.S.: Non preoccuparti per la formattazione del primo messaggio.

Quindi dovrei prendere la stessa funzione presente in document ready e duplicarla dentro l'evento resize? Devo utilizzare variabili diverse secondo te? Ora in ogni caso provo.

I video annidati sono tremendi... Tempo fa mi sono trovato bene con un plugin del mio tema per la visualizzazione responsiva dei video, ma questo metodo mi impedisce di riassegnare randomicamente video e relativi layout diversi al refresh dell'home-page. Sto cercando di fare questo.

Cercherò anche la soluzione via css.
Grazie mille intanto.

[Hans Castorp]

Beh, meraviglioso! Funziona!
Evitato il plugin e fatto tutto con jQuery. Ottimo!
Adesso vediamo se, sempre con Jquery, si può fare il replace random del video.

[lucavizzi]

Quindi dovrei prendere la stessa funzione presente in document ready e duplicarla dentro l'evento resize? Devo utilizzare variabili diverse secondo te?

Invece di duplicare la sequenza di istruzioni, ripetendole identiche nell'evento resize, definisci una funzione che poi richiamerai nei due eventi. Avrai un codice più pulito e più facilmente manutenibile.

function responsive_video(){
   //istruzioni 
}

$(document).ready(function(){
   responsive_video();
});
$(window).resize(function(){
   responsive_video()
});