Joomla.it Forum

Joomla! 4 => Joomla! 4.x => : idroweb 05 Sep 2023, 16:38:03

: [RISOLTO] Responsive sui video youtube non funziona
: idroweb 05 Sep 2023, 16:38:03

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

:

<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

:

.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

:

width="854" height="480"
a

:

width="100%" height="auto"

provato anche così

:

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

: Re: Responsive sui video youtube non funziona
: sgiobbio 05 Sep 2023, 18:57:58

Prova così:

html:

:

<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:

:

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

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

: Re: Responsive sui video youtube non funziona
: idroweb 07 Sep 2023, 22:29:41

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


user.css

:

.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

:

<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