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

21/10/2020 10:43 8689

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:

Nội dung bài viết

1. Background bằng emb
2. Background video nguồn từ self hosting

1. Background bằng emb

Là sử dụng video từng các mạng xã hội video như youtube, vimeo…

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

2. Background video nguồn từ self hosting

Là video được upload lên hosting

<div class="home-hero">
	<div class="video-background" style="width: 100%; height: 100%; position: absolute; left:0; top:0;">
         <video loop="true" autoplay="autoplay" muted="" poster="https://abc.s3.amazonaws.com/wp-content/uploads/2021/08/14020353/video-thumbnail.png">
    <source src="https://abc.s3.amazonaws.com/wp-content/uploads/2021/08/14020802/house-hero2.mp4" type="video/mp4">
    
</video>
        </div>
        <div class="video-mask"></div>
        <div class="home-hero-text-out">
	<div class="home-hero-inner">
		    		<h1 class="hero-headline">This is headline</h1>
		    	     		<span class="hero-subheadline">This is sub headline</span>
 		 		 		     		<a class="orange-button" href="https://www.abc.com/how-it-works/" target="_blank">
     			             		LEARN MORE         		     		</a>
 			</div>
    </div>
</div>
<style>
.home-hero {
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 748px;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}
.video-mask {
    background: rgba(0,0,0,.56);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.home-hero-text-out {
    max-width: 1280px;
    padding: 0 40px;
    width: 100%;
    margin: 0 auto;
    /* width: 100%; */
    -js-display: flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    align-items: center;
    height: 100%;
    box-sizing: border-box;
}
.home-hero-inner {
    max-width: 796px;
    color: #fff;
    z-index: 999;
}
h1.hero-headline {
    font-family: 'Roboto', sans-serif;
    font-size: 51px;
    margin-bottom: 24px;
}
.hero-subheadline {
    display: block;
    font-size: 25px;
    font-weight: 400;
    margin-bottom: 45px;
    font-family: 'Roboto', sans-serif;
}
.orange-button {
    background: url(assets/images/home-page-button-background.png) no-repeat;
    color: #fff;
    display: inline-block;
    font-weight: 700;
    padding: 11px 26px;
    text-decoration: none;
    background-size: contain;
    font-size: 24px;
}
</style>

</video>

</div>

<h1 class="hero-headline">This is headline</h1>

<span class="hero-subheadline">This is sub headline</span>

LEARN MORE </a>

</div>

<style>

.home-hero {

background-position: 50% 50%;

background-repeat: no-repeat;

background-size: cover;

height: 748px;

position: relative;

-webkit-transform-style: preserve-3d;

-moz-transform-style: preserve-3d;

transform-style: preserve-3d;

width: 100%;

}

.video-mask {

background: rgba(0,0,0,.56);

height: 100%;

left: 0;

position: absolute;

top: 0;

width: 100%;

}

.home-hero-text-out {

max-width: 1280px;

padding: 0 40px;

width: 100%;

margin: 0 auto;

/* width: 100%; */

-js-display: flex;

display: -ms-flexbox;

display: flex;

-ms-flex-flow: row wrap;

flex-flow: row wrap;

align-items: center;

height: 100%;

box-sizing: border-box;

}

.home-hero-inner {

max-width: 796px;

color: #fff;

z-index: 999;

}

h1.hero-headline {

font-family: 'Roboto', sans-serif;

font-size: 51px;

margin-bottom: 24px;

}

.hero-subheadline {

display: block;

font-size: 25px;

font-weight: 400;

margin-bottom: 45px;

font-family: 'Roboto', sans-serif;

}

.orange-button {

background: url(assets/images/home-page-button-background.png) no-repeat;

color: #fff;

display: inline-block;

font-weight: 700;

padding: 11px 26px;

text-decoration: none;

background-size: contain;

font-size: 24px;

}

</style>

Các bài viết khác có thể hữu ích với bạn

4.8/5 (10 Đánh giá)

Gửi Phản Hồi

0 Bình Luận

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

Hiệu ứng hover slide image siêu đẹp [ 26/06/2022 13:47 ]
Function tạo rating star sử dụng dashicon từ wordpress [ 03/04/2022 03:02 ]
Css menu vertical danh muc đơn giản [ 20/02/2022 12:40 ]
Html và css section với title, description và card siêu đơn giản [ 17/02/2022 11:22 ]
Hiệu ứng css đẹp transform scale3d [ 10/02/2022 04:05 ]
CSS Animations hoạt động như thế nào [ 14/01/2022 03:49 ]
Cách set size image cùng kích thước không bị vỡ hình với css [ 03/01/2022 03:12 ]
Code phóng to thumbnail khi hover với CSS3 [ 02/01/2022 07:15 ]
Hiệu ứng shine css đẹp animation [ 05/10/2021 08:06 ]
Media query css một số code tham khảo [ 23/09/2021 02:43 ]