i trying add fullscreen video website having trouble getting cover entire screen.
originally, tried using video tag wouldn't work on android. trying iframes , css using is:
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; } no matter what, there additional backspace above / below video.
is there anyway can make video fill entire screen, happy loose off sides.
testing url here.
add width: 1920px; , height: 816px; code , works!
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%); } alternatively starting point solution without iframe.
html, body { margin: 0; padding: 0; } 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>
Comments
Post a Comment