I want to display two videos with different dimensions in the same row. I'm trying to automatically adjust the height so that there are no weird gaps (like in image 1).
IMAGES: https://imgur.com/a/mK2nIKy
I've tried out things with flex display but with no success.
My current set-up is:
<div class="row">
<div class="col-sm block-element-left">
<video class="rc" autoplay="autoplay" loop="loop" muted="muted" playsinline>
<source type="video/mp4" src="video1.mp4">
</video>
</div>
<div class="col-sm block-element-right">
<video class="rc" autoplay="autoplay" loop="loop" muted="muted" playsinline>
<source type="video/mp4" src="video2.mp4">
</video>
</div>
</div>
<style>
.block-element-right {
padding-left: 10px;
}
.block-element-left {
padding-right: 10px;
}
.rc{
-moz-border-radius:20px;
border-radius:20px;
overflow:hidden;
cursor: pointer;
z-index: -1;
width: 100%;
}
.col-sm {
padding: 0%;
position: relative;
}
</style>
```
Try to set the width and height inside video-tag
<div class="col-sm block-element-left">
<video width="420" height="340" autoplay="autoplay" loop="loop" muted="muted"
playsinline>
<source src="movie.mp4" type="video/mp4">
</video>
</div>
Related
How to make a video tag the same size as a poster?
<div class="col-6">
<div class=".fullscreen-bg__video my-2 ">
<video width="100%" height="100%" controlslist="nodownload" poster="./img/4444a.jpg"
controls="true" muted>
<source type="video/mp4" src="./img/6f6035efab042985c4494cc976f23247.mp4">
<span>dosent't support</span>
</video>
</div>
Try this,
CSS
.postr{
object-fit: cover;
}
HTML
<video class="postr" width="100%" height="100%"
controlslist="nodownload" poster="./img/4444a.jpg" controls="true" muted>
If that doesn't work then then try object:fill
How could I add a title to the top left of video like a YouTube video?
<video id="my-video-stream" controls="" width="320" height="240">
<label id="title">My cooooool label</label>
<source src="video/video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
May be you can place the container to wrap the video and label and then we can achieve this.
.video-container {
position: relative;
}
.title-label {
position: absolute;
z-index: 9;
color: blue;
margin-top: 5px;
margin-left: 5px;
}
<div class="video-container">
<label class="title-label">My cooooool label</label>
<video id="my-video-stream" controls="" width="320" height="240">
<source src="video/video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
I have .container-for-all-videos with min-height and height auto. I gave clear:both to this container. In this container, I have few .container-for-video with float's.
After I have div with hr. This hr jumps on top. It stays on distance min-hight(container-for-all-videos), and if it is smaller than videos take - hr jumps.
I don't know how many videos will be for sure. So, I need .container-for-all-videos flexible and after it . (I can't use flex, because I have to support old IE).
.container-for-all-videos{
clear: both;
width: 100%;
margin-top: 30px;
min-height: 850px;
height: auto;
}
.container-for-video{
margin: 10px;
width: 46%;
height: auto;
text-align: center;
}
.container-for-video:nth-child(odd){
float: left;
}
.container-for-video:nth-child(even){
float: right;
}
.container-for-video h4{
margin-top: 10px;
}
hr{
display: block;
margin-top: 40px;
margin-bottom: 50px;
border:none;
height: 3px;
background-color: #61c2ee;
}
<div class="container-for-all-videos">
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
</div>
<div>
<hr>
</div>
Give css of clear class and add <div class="clear"></div> after all video div.
.container-for-all-videos{
width: 100%;
margin-top: 30px;
min-height: 850px;
height: auto;
}
.container-for-video{
margin: 10px;
width: 46%;
height: auto;
text-align: center;
}
.container-for-video:nth-child(odd){
float: left;
}
.container-for-video:nth-child(even){
float: right;
}
.container-for-video h4{
margin-top: 10px;
}
hr{
display: block;
margin-top: 40px;
margin-bottom: 50px;
border:none;
height: 3px;
background-color: #61c2ee;
}
.clear{
clear:both;
}
<div class="container-for-all-videos">
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="container-for-video">
<video width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto">
<source src="videos/video-soccer_2.mp4" type="video/mp4" />
</video>
<h4>About video</h4>
</div>
<div class="clear"></div>
</div>
<div>
<hr>
</div>
I am doing some audio support testing for my company's audio player, and am displaying a series of HTML5 Audio players to see which of our available formats are supported through a simple HTML5 Audio Player. The format here is not in question, just an explanation of what I'm doing.
The players display as they should on Windows Chrome, Firefox and IE11, on Mac Chrome, Firefox and Safari, on Android Internet, Chrome and Firefox... but when it comes to iPad and iPhone, this is where the Twilight Zone episode begins.
All that is visible in each Audio element, is the PLAY button, and the AirPlay control (if available). I have looked all over the web, and everyone says that if you make the elements wide enough, the time scrub and volume should just show up. I have the players stretching the entire width of the page, and still nothing.
Here is my HTML and CSS
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AUDIO TESTS</title>
</head>
<body>
<div class="player">
<h3>AIFF 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Track01.aiff" type="audio/aiff">
</audio>
</div>
<div class="player">
<h3>AIFF 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Track29.aiff" type="audio/aiff">
</audio>
</div>
<div class="player">
<h3>M4A 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="35027823.m4a" type="audio/mp4">
</audio>
</div>
<div class="player">
<h3>M4A 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="DefyingGravitywinds.m4a" type="audio/mp4">
</audio>
</div>
<div class="player">
<h3>MP3</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="35027822.mp3" type="audio/mpeg">
</audio>
</div>
<div class="player">
<h3>WAV 1</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="Aboveallhigh.wav" type="audio/wav">
</audio>
</div>
<div class="player">
<h3>WAV 2</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="holygourndhigh.wav" type="audio/wav">
</audio>
</div>
<div class="player">
<h3>WMA</h3>
<audio preload="auto" tabindex="0" controls="controls">
<source src="A8526.wma">
</audio>
</div>
</body>
</html>
CSS
body {
wwidth: 100%;
height: 100%;
background: #ff0000;
font-size: 100%;
font-family: Arial, sans-serif;
color: #333;
margin: 10px 0;
text-align: center;
}
.player{
width: 75%;
height: auto;
display: block;
margin: 5px auto;
border-radius: 3px;
background-color: rgba(0,100,0, 1);
border: 1px solid #333;
padding: 10px;
}
.player:hover {
background-color: rgba(0,100,0, 0.4);
}
.player h3 {
padding: 0;
margin: 0 0 10px;
}
audio {
width: 100%;
height: 100px;
display: block;
margin: 0;
}
Again, I am asking WHY can't I get the controls to fully show up on iPad and iPhone. This is not an audio format support question.
Here's a screenshot of WHAT my iPad is showing;
It seems like controls are showing up, just not the same controls as used in HTML5 on a computer. You can see the play/pause button just not the current location slider.
I had a similar issue and the problem seems to only occur if the audio player is not wide enough. Try a higher width (our flipping your phone in landscape) to determine if its a width issue or a controls boolean issue. Unfortunately I wasn't able to find a way to force the controls and ended up having to make the audio player wider.
Can someone please help! How to insert caption over the intro video: www.idxforrealestate.com
The code we have is:
<div class="holder">
<video width="100%" height="auto" autoplay loop>
<source src="http://idxforrealestate.com/video/miami-beach.mp4" type="video/mp4">
</video>
</div>
This is if you want the caption over your video.
HTML:
<div class="holder">
<div id="text_some">Some kind of caption</div>
<video width="100%" height="auto" autoplay loop>
<source src="http://idxforrealestate.com/video/miami-beach.mp4" type="video/mp4">
</video>
</div>
CSS:
.holder{
position:absolute;
z-index:0;
}
#text_some{
position:absolute;
z-index:1;
width: 100%;
height:auto;
text-align: center;
color:white;
font-size: 5vw;
top: 40%;
}
jsFiddle - https://jsfiddle.net/tax42nar/