Code css hình nền bằng video: Trong các dự án web đôi lúc khách hàng yêu cầu làm nền một trang hoặc khu vực nào đó bằng video, thì đây là code hữu dụng cho bạn, sau đây tôi xin chia sẽ code này:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<style> .video-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; overflow: hidden; } .video-wrapper iframe { width: 100vw; height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */ min-height: 100vh; min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <div style="position: relative; height: 690px;"> <div class="video-wrapper"> <iframe src="https://player.vimeo.com/video/76979871?background=1&autoplay=1&loop=1&byline=0&title=0" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> </div> <h2 style="text-align: center; padding-top: 200px;">This is Vimeo background</h2> </div> |
Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net
Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress