Joomla.it Forum

Joomla! 4 => Joomla! 4.x => : six73 09 Jan 2022, 18:21:32

: Embed responsive video youtube
: six73 09 Jan 2022, 18:21:32

Ciao a tutti ho dei problemi con degli embed di video youtube che sto inserendo.
Se lo inserisco con le dimensioni fisse quando poi passo in mobile ho lo scroll orizzontle, se lo inserisco invece con larghezzza e altezza 100% mi rispetta solo la larghezza mentre in altezza si vede solo una parte del video.
Come inserirlo che si adatti alle varie proporzioni?

: Re:Embed responsive video youtube
: mariarosaria 09 Jan 2022, 19:46:11

Se chiedi a google ci sono diverse quide, tipo questa (https://www.guadagnareconunblog.com/video-youtube-incorporati-responsive/), ma ne trovi proprio tante

Comunque tempo fa ne avevo trovata un'altra che adesso non vedo pių, il codice era pių completo (non a livello responsive, per quello basta la guida che ti ho indicato), te lo posto

:

/*Youtube player*/
.youtube-player {
        position: relative;
        padding-bottom: 56.23%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 100%;
        background: #000;
        margin: 5px;
    }
   
    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        background: transparent;
    }
   
    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 100%;
        width: 100%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }
   
    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }
   
    .youtube-player .play {
        height: 72px;
        width: 72px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }
/*Fine*/Ovviamente al frame devi attribuire la classe specificata nel css

: Re:Embed responsive video youtube
: six73 10 Jan 2022, 11:59:43

Grazie mille dell'aiuto, č proprio quello che mi serviva, ora si vede perfettamente  ;)

: Re:Embed responsive video youtube
: giusebos 11 Jan 2022, 11:04:06

bene, inserisci il risolto come si deve.

grazie.