<!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>
Related
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'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>
I am having problems with my iframe. I really want the frame to auto adjust heights according to the content within the iframe. I really want to do this via the CSS without javascript. However, I will use javascript if I have too.
I've tried height: 100%; and height: auto;, etc. I just don't know what else to try!
Here is my CSS. For the frame...
#frame {
position: relative;
overflow: hidden;
width: 860px;
height: 100%;
}
And then for the frame's page.
#wrap {
float: left;
position: absolute;
overflow: hidden;
width: 780px;
height: 100%;
text-align: justify;
font-size: 16px;
color: #6BA070;
letter-spacing: 3px;
}
The page's coding looks like this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" �� "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>...</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="navigation">
home
about
fanlisting
100 reasons
letter
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Please note that the URL within the iframe is different then the website the iframe will be displayed on. However, I have access to both websites.
Can anyone help?
I had this same issue but found the following that works great:
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
Here is what a typical YouTube embed code looks like, with fixed width and height:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
And use the following CSS:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Here is the page I found the solution on:
https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
Depending on your aspect ratio, you will probably need to adjust the padding-bottom: 56.25%; to get the height right.
This is my PURE CSS solution :)
Add, scrolling yes to your iframe.
<iframe src="your iframe link" width="100%" scrolling="yes" frameborder="0"></iframe>
The trick :)
<style>
html, body, iframe { height: 100%; }
html { overflow: hidden; }
</style>
You don't need to worry about responsiveness :)
#SweetSpice, use position as absolute in place of relative. It will work
#frame{
overflow: hidden;
width: 860px;
height: 100%;
position: absolute;
}
hjpotter92
Add this to your section:
<script>
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
And change your iframe to this:
<iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />
It is posted Here
It does however use javascript, but it is simple and easy to use code that will fix your problem.
<div id="content" >
<h1>Update Information</h1>
<div id="support-box">
<div id="wrapper">
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
</div>
</div>
</div>
#support-box {
width: 50%;
float: left;
display: block;
height: 20rem; /* is support box height you can change as per your requirement*/
background-color:#000;
}
#wrapper {
width: 90%;
display: block;
position: relative;
top: 50%;
transform: translateY(-50%);
background:#ddd;
margin:auto;
height:100px; /* here the height values are automatic you can leave this if you can*/
}
#wrapper iframe {
width: 100%;
display: block;
padding:10px;
margin:auto;
}
https://jsfiddle.net/umd2ahce/1/
You have to use absolute position along with your desired height.
in your CSS, do the following:
#id-of-iFrame {
position: absolute;
height: 100%;
}
You should note that div tag behaves like nothing and just let you to put something in it. It means that if you insert a paragraph with 100 lines of text within a div tag, it shows all the text but its height won't change to contain all the text.
So you have to use a CSS & HTML trick to handle this issue. This trick is very simple. you must use an empty div tag with class="clear" and then you will have to add this class to your CSS. Also note that your have #wrap in your CSS file but you don't have any tag with this id. In summary you have to change you code to something like below:
HTML Code:
<!-- Change "id" from "container" to "wrap" -->
<div id="wrap">
<div id="header">
</div>
<div id="navigation">
home
about
fanlisting
100 reasons
letter
</div>
<div id="content" >
<h1>Update Information</h1>
<iframe name="frame" id="frame" src="http://website.org/update.php" allowtransparency="true" frameborder="0"></iframe>
<!-- Add this line -->
<div class="clear"></div>
</div>
<div id="footer">
</div>
<!-- Add this line -->
<div class="clear"></div>
</div>
And also add this line to your CSS file:
.clear{ display: block; clear: both;}
According to this post
You need to add the !important css modifier to your height percentages.
Hope this helps.