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>
Related
I want that the <object> or <iframe> element has the same measures like its content.
Given are two simple html files.
square.html (want to inject into the main file)
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
:root {
--hk-mes: 300px;
}
html,
body {
width: var(--hk-mes);
height: var(--hk-mes);
margin: 0;
padding: 0;
}
.square {
width: 100%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="square"></div>
</body>
</html>
main.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style>
html,
body {
margin: 0;
padding: 0;
display: inline-block;
}
.have-measures-of-content {
width: auto;
height: auto;
border: 0;
}
</style>
</head>
<body>
<object class="have-measures-of-content" data="./square.html"></object>
</body>
</html>
The <object> element has a size of 300px/150px (width/height). How can I make that it has automatically the size of its content, in this case 300px*300px, with plain html / css?
Another weird thing is that if I set the <object> or <iframe> manually to 300px/300px (width/height) the scrollbars don't disappear – I must set the height to 304px ... From where the 4px come from? The 4px come from display: inline-block. display: inline-flex doesn't add 4px to bottom ...
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>
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'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>