Guest User

Untitled

a guest
Feb 20th, 2018
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 0.89 KB | None | 0 0
  1. <!-- Basically you just add your video here...before anything content -->
  2.  
  3. <div class="fullscreen-bg">
  4. <video loop muted autoplay class="fullscreen-bg__video">
  5. <source src="video.mp4" type="video/mp4">
  6. </video>
  7. </div>
  8.  
  9. <!-- Then you add some CSS and voilá... -->
  10.  
  11. <style>
  12. .fullscreen-bg {
  13. position: fixed;
  14. top: 0;
  15. right: 0;
  16. bottom: 0;
  17. left: 0;
  18. overflow: hidden;
  19. z-index: -100;
  20. }
  21.  
  22. .fullscreen-bg__video {
  23. position: absolute;
  24. top: 0;
  25. left: 0;
  26. width: 100%;
  27. height: 100%;
  28. }
  29.  
  30. @media (min-aspect-ratio: 16/9) {
  31. .fullscreen-bg__video {
  32. height: 300%;
  33. top: -100%;
  34. }
  35. }
  36.  
  37. @media (max-aspect-ratio: 16/9) {
  38. .fullscreen-bg__video {
  39. width: 300%;
  40. left: -100%;
  41. }
  42. }
  43.  
  44. @media (max-width: 767px) {
  45. .fullscreen-bg__video {
  46. display: none;
  47. }
  48. }
  49. </style>
  50.  
  51. <!-- You have a nice video background image then -->
Add Comment
Please, Sign In to add comment