Centering Background Video
How do I make an centering background video?
In the future, It is preferable to consider using object-fit. What is a centering background video? How do you make a centering background video? This script and codes were developed by Tomoyuki Kashiro on 19 January 2023, Thursday.
Centering Background Video - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Centering Background Video</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Raleway:200'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="info"> <h1 class="title">Centering Background Video</h1> <p class="desc">In the future, It is preferable to consider using <a href="http://caniuse.com/#feat=object-fit" target"_blank">object-fit</p> <p class="author"><a href="https://codepen.io/Tkashiro/" target="_blank">@Tkashiro</a></p>
</div>
<div class="video__outer"> <div class="video__inner js-video__inner"> <video class="video" loop="loop" autoplay="autoplay" muted="muted"> <source type="video/webm" src="http://tomoyukikashiro.me/video/landscape.webm"/> <source type="video/mp4" src="http://tomoyukikashiro.me/video/landscape.mp4"/> </video> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Centering Background Video - Script Codes CSS Codes
html, body { width: 100%; height: 100%; position: relative; font-family: 'Raleway', sans-serif;
}
a:link, a:visited, a:hover, a:focus, a:active { color: #fff;
}
.info { position: absolute; top: 80px; right: 20px; color: #fff; text-align: right; z-index: 10;
}
.title { font-size: 5rem; margin-bottom: 20px;
}
.desc { font-size: 2rem; margin-bottom: 20px;
}
.author { font-size: 3rem;
}
.video__outer { width: 100%; height: 100%; position: relative; overflow: hidden;
}
.video__inner { position: absolute; width: 100%; height: 100%;
}
.video { min-height: 100%; width: 100%; height: auto; filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ -webkit-filter: grayscale(1); filter: grayscale(1);
}
.notsupport { font-size: 2.5rem; line-height: 5rem; padding-top: 100px; text-align: center;
}
@media screen and (max-width: 1100px) { .title { font-size: 3rem; } .desc { font-size: 1.3rem; } .author { font-size: 2rem; }
}
Centering Background Video - Script Codes JS Codes
$(function(){ var hasTouch = !!('ontouchstart' in window); if(hasTouch){ $(document.body).empty().append('<p class="notsupport">This sample dose not support mobile device.<br> Please check on your laptop.<p>'); } var video = { width : 1270, height: 720, prevCurrentTime: 0, $elm : $('.video'), $innerElm: $('.js-video__inner') }; video.aspectRatio = video.width/video.height; // event video.$elm.on('timeupdate ', function(e){ console.log('duration time : ' + (e.currentTarget.currentTime - video.prevCurrentTime)); video.prevCurrentTime = e.currentTarget.currentTime; }); function getVideoWidth(windowHeight){ return (windowHeight * video.aspectRatio) + 'px'; } function getVideoOffsetLeft(windowWidth){ var left = 0; if(windowWidth < video.width){ left = (video.$elm.width() - windowWidth) / 2 * -1; } return left + 'px'; } function resizeVideo(windowWidth, windowHeight){ video.$innerElm.css('left', getVideoOffsetLeft(windowWidth)); video.$elm.css('minWidth', getVideoWidth(windowHeight)); } // main $(window).on('resize', function(){ resizeVideo(window.innerWidth, window.innerHeight); }).trigger('resize');
});
Developer | Tomoyuki Kashiro |
Username | Tkashiro |
Uploaded | January 19, 2023 |
Rating | 3 |
Size | 4,087 Kb |
Views | 6,072 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Binary search algorithm in JavaScript | 1,798 Kb |
Spotlight Effect | 2,723 Kb |
Shadow Dom Test | 2,204 Kb |
Page transition | 2,767 Kb |
Media Fragments URI | 1,753 Kb |
Bubble sort algorithm in JavaScrip | 1,713 Kb |
Linear search algorithm in JavaScript | 1,698 Kb |
CSS Animation Sample | 2,896 Kb |
CSS Slideshow | 2,721 Kb |
CSS multi-column layout | 2,627 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Mega Menu by Joni | Asakasinsky | 3,171 Kb |
Apple website | Jds317 | 1,835 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
Carousel Test | Sbirchall | 1,509 Kb |
RPG Style Text Dialogue | Odylic | 2,635 Kb |
Price Comparison Table | Orrinward | 3,459 Kb |
Vanilla modal window | Jasonhowmans | 3,554 Kb |
Simple Weather App | Cmwebby | 0 Kb |
Cant get enough icecream in pure css3 | Melawire | 4,322 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!