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/
Related
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>
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 having been trying for days now to move a video on top of a <div> which includes an <img>
Effectively I am trying to make the image of a TV show a video on its screen.
Could somebody help me in positioning the video so it is central to the image inside the screen. I can't even get the video to position on top of the <img> let alone making it the correct size and centering it.
Thanks in advance. Much appreciated.
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="videogallery">
<div class="row">
<div class="col-xs-12">
<img class="img-responsive" src="img/TVWALLTWO.jpg">
<video controls="" height="330" width="440">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag.
</video>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
</div>
</div>
.videosheading {
color: #E3A750;
text-align: center;
}
.videogallery {
height: auto;
}
video {
background-color: red;
z-index:-1;
position:relative
}
To center the video over the responsive image, you need a container that has position: relative, than the video must have position: absolute. Look at the snippet bellow, hope you get the idea:
.video-cell {
positon: relative;
}
.video-cell img {
width: 100%;
}
.video-cell video {
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 100%;
}
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="videocontainer">
<h1 class="videosheading"><strong>VIDEOS</strong></h1>
<div class="videogallery">
<div class="row">
<div class="col-xs-12 video-cell">
<img class="img-responsive" src="https://placehold.it/880x660">
<video controls width="440" height="330">
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
</div>
</div>
Also on JSFiddle.
Need Help on adding text on top of, so the text is overlaying an HTML 5 Video, And I also need to add a form inputs and buttons as well below is my HTML5 Video Code.
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
Surely you are looking for more than this:
<div class="container">
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
<div class="overlay">
<p>Content above your video</p>
<form>
<p>Content Below Your Video</p>
<label for="input">Form Input Label</label>
<input id="input" name="input" value="" />
<button type="submit">Submit</button>
</form>
</div>
</div>
If you want to put the content on top of the video, you would use some kind of positioning:
.container { position:relative; }
.container video {
position:relative;
z-index:0;
}
.overlay {
position:absolute;
top:0;
left:0;
z-index:1;
}
You can use top and left position to be in percentage. as it will auto adjust top text when the window content size will change
<div class="container">
<video id="video" width="770" height="882" onclick="play();">
<source src="video/Motion.mp4" type="video/mp4" />
</video>
<div class="overlayText">
<p id="topText">Content above your video</p>
</div>
</div>`enter code here`
#overlayText {
position:absolute;
top:30%;
left:20%;
z-index:1;
}
#topText {
color: white;
font-size: 20px;
align-self: center;
}