.bgVideo { position: absolute; pointer-events: none; width: 100%; height: 100%; background: none; top: 0; left: 0; z-index: -1; overflow: hidden; video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: none; } } @media(min-aspect-ratio: 16/9) { .videoBg video { width: 100%; height: auto; } } @media(max-aspect-ratio: 16/9) { .videoBg video { width: auto; height: 100%; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter