Tam Ekran Video - tam ekranı gösterme

Web sitesine tam ekran video eklemeye çalışıyorum ancak tüm ekranı kaplamakta güçlük çekiyorum.Tam Ekran Video - tam ekranı gösterme

Aslında, video etiketini kullanmayı denedim, ancak bu, Android'de düzgün çalışmayacaktı. Şimdi iframe çalışıyorum ve kullanıyorum CSS:

iframe { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    min-width: 100%; 
    min-height: 100%; 
    width: auto; 
    height: auto; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
    background: url(polina.jpg) no-repeat; 
    background-size: cover; 
}

olursa olsun, videonun altında/üstünde ek geri silme hep orada ne olduğunu.

Videonun ekranın tamamını doldurabildiğinden, bazılarını kenarlarından gevşetmekten mutluluk duyuyorum.

Test url here.

kaynak

2016-03-26 CharlyAnderson

http://fvsch.com/code/video-background/ videonun en boy oranı ne zaman (bu durumda 2.35 yılında: 1) Eğer siyah çubuklar görmelisiniz ekran en boy oranını eşleşmiyor. Videoyu uzatabilirsiniz, ancak kalite en iyisi olmayacak. – Francesco

Aslında bu bağlantıyı bulundu ve sağladığı kod hile yapar!

#video-bg { 
    position: fixed; 
    top: 0; right: 0; bottom: 0; left: 0; 
    overflow: hidden; 
} 

#video-bg > video { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

/* 1. No object-fit support: */ 

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

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

/* 2. If supporting object-fit, overriding (1): */ 

@supports (object-fit: cover) { 
    #video-bg > video { 
     top: 0; left: 0; 
     width: 100%; height: 100%; 
     object-fit: cover; 
    } 
}

kaynak

2016-04-01 10:33:38 CharlyAnderson

kodunuza width: 1920px; ve height: 816px; ekleyin ve o inşaat!

iframe { 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 1920px; 
    height: 816px; 
    -ms-transform: translateX(-50%) translateY(-50%); 
    -moz-transform: translateX(-50%) translateY(-50%); 
    -webkit-transform: translateX(-50%) translateY(-50%); 
    transform: translateX(-50%) translateY(-50%); 
}

Buna alternatif iframe olmayan bir çözüm için bir başlangıç noktası olabilir.

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} \t 
 

 
video { 
 
    object-fit: cover; 
 
    width:100%; 
 
    min-height:100%; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    <title>Document</title> 
 
    </head> 
 
    <body> 
 
    <video width="1920" height="816" preload="auto" autoplay loop> 
 
     <source src="http://dev.charlyanderson.co.uk/OnePointEight/wp-content/uploads/2016/03/BLKLOGO.m4v" type="video/mp4"> 
 
    </video> 
 
    </body> 
 
</html>

kaynak

2016-03-26 15:39:53 Francesco

Tam Ekran Video - tam ekranı gösterme

cevap

İlgili konular