Vollbildvideo - Vollbild wird nicht angezeigt

Ich versuche, einer Website ein Vollbildvideo hinzuzufügen, aber ich habe Probleme damit, es auf den gesamten Bildschirm zu bringen.Vollbildvideo - Vollbild wird nicht angezeigt

Ursprünglich habe ich versucht, die Video-Tag, aber das würde nicht ordnungsgemäß auf Android funktionieren. Jetzt versuche ich, iframes und die CSS ich verwende ist:

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; 
}

Egal, was es über/unter dem Video immer zusätzliche Backspace ist.

Gibt es trotzdem ich kann das Video füllen den gesamten Bildschirm, glücklich, einige von den Seiten zu verlieren.

Testing url ist here.

Quelle

2016-03-26 CharlyAnderson

Wenn das Seitenverhältnis des Videos (in diesem Fall 2.35: 1) nicht das Seitenverhältnis des Bildschirms passen schwarze Balken sehen sollten. Sie können das Video strecken, aber die Qualität wird nicht die beste sein. – Francesco

Ich fand diesen Link und der Code bietet es funktioniert der Trick! http://fvsch.com/code/video-background/

#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; 
    } 
}

Quelle

2016-04-01 10:33:38 CharlyAnderson

hinzufügen width: 1920px; und height: 816px;, um Ihren Code und es funktioniert!

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%); 
}

Alternativ könnte dies ein Ausgangspunkt für eine Lösung ohne iframe sein.

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>

Quelle

2016-03-26 15:39:53 Francesco

Vollbildvideo - Vollbild wird nicht angezeigt

Antwort

Verwandte Themen