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

21/10/2020 10:43 8488

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>

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 css đẹp animation css [ 05/10/2021 08:06 ]
Media query css một số code tham khảo [ 23/09/2021 02:43 ]
Code spinner font awesome 4.7 [ 17/07/2021 14:56 ]
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 ]