Code css hình nền bằng video

21/10/2020 10:43 8206

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:

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

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

frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</div>

<h2 style="text-align: center; padding-top: 200px;">This is Vimeo background</h2>

</div>

5/5 (3 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Code css dropdown submenus đơn giản mà bóng mượt ( menus nhiều cấp css đơn giản) [ 06/10/2020 07:11 ]

Code css hình nền bằng video

có thể bạn cần xem:

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)

Custom header và custom background- tạo tùy biến logo nền banner của header và tùy biến nền body

Import mã css, js vào head của admin bằng wp_enqueue_style và wp_enqueue_script

Tìm hiểu function add_action trong wordpress