Come creare un iframe di incorporamento video?

Giulia Di Veronica

Come creare un iframe di incorporamento video?

Salve. Ho un sito per adulti da qualche parte, e vorrei che gli utenti possano incorporare i miei video sul loro sito web. Sono a conoscenza che è possibile farlo tramite la funzione iframe, ma non so proprio da dove iniziare.

Devo creare una cartella nella directory principale del mio sito, forse? Grazie a chi mi può aiutare a capirci qualcosa...

Un saluto, Giulia.

mirkomassarutto

Devi creare una pagina che contenga il video. Possibilmente senza bordi e con il video fullscreen

poi chi vuole condividere dovrà solo inserire:

<iframe width="420" height="315"
src="https://tuosito.ext/videopage/">
</iframe>

Giulia Di Veronica

Salve, Mirko. Questa pagina che devo creare con il video fullscreen, devo poi pubblicarla allo stesso modo di come faccio con i video standard?

Grazie mille, Giulia.

mirkomassarutto

@giulia-di-veronica è una pagina "vuota" che contiene solo il video in fullscreen

Questo è un esempio di come incorpori un video youtube

<iframe width="560" height="315" src="https://tuosito.ext/videopage/" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

questa la pagina che usa youtube per permetterti l'inserimento dell'iframe (tipo quella che dovresti costruire)

Giulia Di Veronica

@mirkomassarutto

Ciao, Mirko. Una volta creata la pagina, come faccio a inserire il video in fullscreen? In parole brevi quella pagina dovrebbe contenere solo il video, quando la si visualizza. Ebbene, non riesco proprio.

Puoi offrirmi qualche indicazione più dettagliata?

Grazie ancora, Giulia.

mirkomassarutto

@giulia-di-veronica

<div id="video-wrapper">
    <video id="player" controls autplay="true" preload="auto" width="1880px" height="980px" poster="poster.png">
        <source src="video/tuovideo.mp4" type='video/mp4' />
        <track kind="subtitles" src="/subtitles/tuovideo.vtt" srclang="en" label="Svenska"></track>
    </video>
</div>

CSS

html, body {
  height:100%;
}
body {
  margin:0;
  padding:0;
}
#video-wrapper {
   position: fixed;
   top: 0; 
   right: 0; 
   bottom: 0; 
   left: 0;
   overflow: hidden;
} >  #player {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   cursor:pointer;
}

@media (min-aspect-ratio: 16/9) {
    >  { 
       height: 300%; 
       top: -100%; 
    }
}

@media (max-aspect-ratio: 16/9) {
    > { 
       width: 300%; 
       left: -100%; 
    }
}