I have videos on my webpage displayed in a scrollable list, where each video is covering the whole screen, like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Videos</title>
<style>
body {
background-color: #090909;
}
.video-box {
display: flex;
align-items: center;
}
.video-box video {
box-sizing: border-box;
padding: 8px;
margin: 0 auto;
max-height: 100vh;
max-width: 100%;
}
</style>
</head>
<body>
<section class="videos">
<div class="video-box">
<video preload="none" poster="vert1.png" autoplay muted loop playsinline>
<source src="vert1.mp4" type="video/mp4">
</video>
</div>
<div class="video-box">
<video preload="none" poster="vert2.png" autoplay muted loop playsinline>
<source src="vert2.mp4" type="video/mp4">
</video>
</div>
<div class="video-box">
<video preload="none" poster="vert1.png" autoplay muted loop playsinline>
<source src="vert1.mp4" type="video/mp4">
</video>
</div>
<div class="video-box">
<video preload="none" poster="vert2.png" autoplay muted loop playsinline>
<source src="vert2.mp4" type="video/mp4">
</video>
</div>
</section>
</body>
</html>
The missing piece for my implementation is to make the videos snap, like in eg. TikTok or YouTube Shorts. I tried implementing it with JavaScript with fullPage.js but found the additional effort of putting scripts into webpage code problematic. Is this implementation possible with just HTML and CSS?
For this specific purpose page-snap-* CSS properties were created.
To make pages snap in the example, just two additional CSS properties have to be added:
<style>
html /* IMPORTANT: scroll-snap-type won't work with body selector, so replace it with html */ {
background-color: #090909;
scroll-snap-type: y mandatory; /* Define snapping behavior. "y" indicates vertical behavior, "mandatory" won't allow the user to stay in-between two pages. */
}
.video-box {
display: flex;
align-items: center;
scroll-snap-align: start; /* Define snapping target. Can also be "center" or "end". */
}
.video-box video {
box-sizing: border-box;
padding: 8px;
margin: 0 auto;
max-height: 100vh;
max-width: 100%;
}
</style>
Related
I am helping out with some coding - which is not my fortay - and as part of a page, we are wanting to include and embed video and in a column to the right is a title for the video.
I am using HTML columns to allow them to show underneath each other on mobile. But because I want the title to show vertically aligned in the centre of the video, the responsive version has a big gap due to the I have had to use for the desktop version to look ok. I know this isn't the best way but I have tried using different padding in the .column styles, but because it appears to both, it's not giving me the look I need.
Is there any way of fixing this so there is a large padding on desktop but small-to-none on mobile?
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<iframe src="VIDEO URL" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="column">
<center>
<br><br><br><br><br><br><p class="rtecenter"><p style="font-size:24pt; color:#0060a9;"><strong>VIDEO TITLE </strong></p>
</div>
</div>
</body>
</html>
Tried using the responsive style to add padding or trying to create a second column style but then the columns don't show floating next to each other.
Possibly do something like this?
What I did was got rid of all the <br> you used to manually "center" the title and simply added some CSS to style the row in order to align the items in the center, then kind of "undid" it in the media query by setting the row to inline-block
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
}
.row {
display: flex;
align-items: center;
}
/* Clear floats after the columns */
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
width: 100%;
}
.row {
display:inline-block;
}
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<iframe src="VIDEO URL" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="column">
<center>
<p class="rtecenter"><p style="font-size:24pt; color:#0060a9;"><strong>VIDEO TITLE </strong></p>
</center>
</div>
</div>
</body>
</html>
how to give an element the same height and width as its parent.
i have this code html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style-home.css">
</head>
<body>
<section id="section-home">
<video autoplay="" muted="" loop="" id="video-background-home">
<source src="../../multimedia/video/background-home.mp4" type="video/mp4">
</video>
<div id="container-text-home">
<p id="text-title-home">Test</p>
<p id="text-subtitle-home">Test</p>
</div>
</section>
</body>
</html>
The container-text-home must have the same height and width of the "section-home".
The size of "section" depends on the relative size of the video tag inside it.
The video size is:
width: 100%
If I understand correctly what you're trying to do, I think this would do the trick :
#section-home {
background-color: green;
display: flex;
flex-direction: column;
width: fit-content;
}
#video-background-home {
width: 400px;
background-color: red;
}
#container-text-home {
background-color: blue;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style-home.css">
</head>
<body>
<section id="section-home">
<div id="video-background-home">
video
</div>
<div id="container-text-home">
<p id="text-title-home">Test</p>
<p id="text-subtitle-home">Test</p>
</div>
</section>
</body>
</html>
Detailed explanation
display: flex;
flex-direction: column
This makes section-home a Flex container. Flexbox is a tool for allocating space between children inside the flex element. In our case, this allows the container-text-home element to grow veritcally to fill the space
width: fit-content;
This makes the parent container fit the width of the video. This works because the video here has an explicit width.
The container-text-home automatically strech to fill the cross-axis. This is the default behavior
I'd like to make html 5 audio player responsive:
<audio controls class="audio-file" src="/path/to/music.mp3">
Sorry your browser belongs to stone age
</audio>
I have tried some thicks like
audio {
display: block;
}
But the width does not change at all and as the screen shrinks, it exceeds the visible area. I'm wondering what is the best way to fix this?
Try this by adding a object-fit css property
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0">
<style>
body {
display: block;
margin: 8px;
}
audio{
max-height: 100%;
max-width: 100%;
margin: auto;
object-fit: contain;
}
</style>
</head>
<body>
<audio controls="" autoplay="" name="media">
<source src="path/to/music.mp3" type="audio/mpeg">
</audio>
</body>
</html>
I'm trying to achieve a fullwidth display in my site. All is ok in chrome but now the problem is with IE11. It seems that the video itself is not being set to full width.
As you can see in the image there are black portion in both left and right portion. But if you look at the image below
As you can see the video here is set to fullwidth. Any idea what's the problem? Below is the css
.html--homepage_content {
video {
width: 100%;
max-height: 100%;
#media #{$mqMediumAndUp} {
width: initial;
max-height: initial;
}
}
.video-player-container {
height: 100vh;
position: relative;
overflow: hidden;
}
}
.video-player-container {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
video {
width: 100% !important;
height: 100% !important;
#media #{$mqMediumAndUp} {
width: initial !important;
height: initial !important;
}
object-fit: cover;
text-align: center;
}
}
HTML
<div class="video-player-container content-block__content">
<video autoplay="" muted="" loop="" playsinline="">
<source src="http://website.com/video/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
object-fit: cover is not supported in IE 11. You could use polyfills for that. Please check this polyfill.
You could use it like below, remember to change the src of the polyfill to yours, it can work well in IE 11:
<style>
.container {
width: 100%; /* Or whatever you want it to be */
height: 25em; /* Or whatever you want it to be */
}
.media {
width: 100%;
height: 100%;
object-fit: cover; /* Or whatever object-fit you want */
}
</style>
<div class="container">
<video autoplay="" muted="" loop="" playsinline="" data-object-fit="cover" class="media">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
<script src="js/objectFitPolyfill.min.js"></script>
The video scaling mode probably. Check https://www.sitepoint.com/community/t/how-to-fit-video-into-entire-div-that-works-on-ie-too/283224 for example.
If it does not work for you and you know the video dimensions, you can always scale it manually wrapping in other div with offset not visible, but it is an ugly sollution.
You can use this code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
<style type="text/css">
body {
margin: 0;
}
.video-player-container {
width: 100%;
}
.video-player-container video {
width: 100%;
}
</style>
</head>
<body>
<div class="video-player-container content-block__content">
<video width="100%" height="240" autoplay="" muted="" loop="" playsinline="" controls>
<source src="http://website.com/video/video.mp4" type="video/mp4"> Your browser does not support the video tag.
</video>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<style>
.d1 {
background: blue;
padding: 10px;
display: flex;
}
video {
margin: 10px;
width: 100%;
max-width: 500px;
}
</style>
<body>
<div class="d1">
<video controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</body>
</html>
I use a video inside a flexbox like the above and the code works fine except two points: 1) The video size does not fit the control line that is below. How can I make it fit? I think it has something to do with the alignment... 2) I want the video to be resized horizontally only. For that, I searched and use width: 100% and it works but as I resize it the right part seems to ignore the margin that I give it:
justify-content: center;
align-items: center;
Add the above styling to the css. Try the snippet below
<!DOCTYPE html>
<html>
<style>
.d1 {
background: blue;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}
video {
margin: 1rem;
width: 100%;
}
</style>
<body>
<div class="d1">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
</body>
</html>