[RISOLTO] Responsive sui video youtube non funziona

[idroweb]

Ciao a tutti, non riesco a far funzionare il responsive, ho inserito questo codice in un articolo:

Codice: [Seleziona]

<p><div class="video-responsive"><iframe width="854" height="480" src="https://www.youtube.com/embed/hlsRRDEW1f0?list=UUXYT6BGehQIJ1buRnbhCR5w" frameborder="0" allowfullscreen></iframe><></p>
Successivamente ho aggiunto questi codici nell'user.css del template Cassiopeia in Joomla! 4.3.4

Codice: [Seleziona]

.video-responsive {
position: relative;
padding-bottom:56.25%;
padding-top:35px;
height:0;
overflow:hidden;
}

.video-responsive iframe {
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
}
Ho provato anche senza css cambiando i valori nel codice embed ma l'altezza risulta ridotta di 2/3 in tutti i formati e senza responsive:

da

Codice: [Seleziona]

width="854" height="480"
a

Codice: [Seleziona]

width="100%" height="auto"

provato anche così

Codice: [Seleziona]

width="100%" height="480"
Grazie a chi vorrà indicarmi l'errore

[sgiobbio]

Prova così:

html:

Codice: [Seleziona]

<div class="video-wrapper">
<div class="video-responsive">
<iframe src="https://www.youtube.com/embed/XXXXXXXXX?wmode=transparent" frameborder="0" allowfullscreen></iframe>
</div></div>

CSS:

Codice: [Seleziona]

.video-wrapper {
  width:100%;
  max-width:100%;
}

.video-responsive {
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
}

[idroweb]

Non funziona ma grazie lo stesso, ho risolto dopo qualche tentativo, con ChatGPT.


user.css

Codice: [Seleziona]

.video-responsive {
  position: relative;
  padding-bottom: 56.14%; /* Proporzione corretta per le dimensioni originali del video */
  height: 0;
  overflow: hidden;
}


.video-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

nell'articolo indirizzo video senza div

Codice: [Seleziona]

<p class="video-responsive"><iframe src="https://www.youtube.com/embed/.........." width="854" height="480" allowfullscreen="allowfullscreen"></iframe></p>

PS. Tanto tempo fa avevo segnalato la mancata notifica via mail delle risposte che continua