fare scomparire video fullscreen

**neo1976** · 03-01-2016, 05:47

vorrei far scomparire un video fullscreen con l'effetto fade out appena il video termina, ma non ci riesco in nessun modo ho provato così, qualcuno sa dirmi dove ho sbagliato o consigliarmi un'alternativa?

codice HTML:

<!DOCTYPE html><html><head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script>$('#fullscreen-bg video').bind('ended', function(){
   $(this).parent().fadeOut()
})</script></head><body>
<div class="fullscreen-bg">        <video  autoplay  class="fullscreen-bg__video">            <source src="video/gatto.mp4" type="video/mp4">            <source src="video/gatto.ogv" type="video/ogg">            <source src="video/gatto.webm" type="video/webm">        </video>    </div></body></html>

**cavicchiandrea** · 03-01-2016, 10:45

A) dove è questo oggetto #fullscreen-bg video? Inoltre bisogna capire quando lo richiami.
B) bind non credo sia più supportato da jquery devi usare on
C) cosa è 'ended'?

**neo1976** · 04-01-2016, 10:46

A) questa è la parte css dove sta #fullscreen-bg__video:

codice:

body {
margin: 0;
padding: 0;
}


.content {
margin: 0 auto;
width: 100%;
max-width: 960px;
padding: 0 15px;
}


h1 {
margin: 60px 0;
padding: 0;
font-size: 50px;
text-align: center;
}


p {
margin: 0 0 30px 0;
font-size: 30px;
line-height: 1.5;
}


.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}


.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


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


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


@media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}


.fullscreen-bg__video {
display: none;
}
}

C)ended non so cosa sia, ho trovato questo script in questa pagina internet e speravo funzionasse: http://stackoverflow.com/questions/1...ect-after-play

**cavicchiandrea** · 04-01-2016, 16:30

Non so che dire... ma senza un minimo di conoscenza di come funziona JavaScript dubito che potrai risolvere

**neo1976** · 06-01-2016, 11:10

Grazie comunque. :-)

**fcaldera** · 07-01-2016, 11:59

ended è un evento che si verifica al termine del playback del video

senza un esempio modificabile non posso verificare, ma di certo stai attaccando l'evento ad un elemento

codice:

$('#fullscreen-bg video')

quando ancora non esiste in pagina

dovresti quantomeno eseguire quel codice all'evento domready

**neo1976** · 07-01-2016, 17:21

grazie fcaldera,ho risolto.

Discussione: fare scomparire video fullscreen

Strumenti discussione

Ricerca discussione

Visualizza

fare scomparire video fullscreen

Permessi di invio