I have added a video and an audio file to a webpage, however they don't seem to want to center.
The HTML code is:
<h2>Dedicated to Quality</h2>
<video height="210" class="center" controls="controls" poster="aboutus/poster.jpg">
<source src="aboutus/ucorp.mp4" type="video/mp4"/>
Your browser does not support the HTML5 video element.
</video>
<p>
For the audio of this webpage, use the audio controls below.
</p>
<audio class="center" controls="controls">
<source src="aboutus/voiceover.mp3" type:"audio/mp3"/>
Your browser does not support the HTML5 audio element.
</audio>
The CSS code is:
video.center
{
display: block;
margin-left: auto;
margin-right: auto;
}
audio.center
{
display:block;
margin-left:auto;
margin-right:auto;
}
So I have already added the display:block; CSS classes and have the margins set to auto.
According to the tutorial I am following, this should work.
Below I have attached what I am expecting vs. what I am getting (note: disregard the video thumbnails and sizes being different).
Expected Outcome vs Obtained Outcome.
Thanks in advance!
As seen in new Google Chrome updates, we can see the download button for embedded audio/video in HTML pages. I want to show the same in Firefox & edge browsers.
How can I achieve this?
you can't have the same exact thing unless you create it yourself and disable the download button for Chrome so it'd look consistent in all browsers.
.download{
height: 45px;
width: 45px;
position: relative;
top: -30px;
left:-55px;
}
<div class="container">
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<a href="https://www.w3schools.com/html/mov_bbb.mp4" target="_blank" download><img class="download" src='https://cdn1.iconfinder.com/data/icons/hawcons/32/698392-icon-129-cloud-download-128.png'/></a>.
</div>
I have been trying to display an image and on hover, a video would start replacing the image, I used Javascript for the hover functions.
I did this using "poster" in the video tag like this:`
<div class="video">
<video id="videotest" poster="images/img.jpg">
<source src="images/bkg.mp4" type="video/mp4"></source>
Can't use videos here.
</video>
</div>
However, I would like the video to be the same size as the image. The video is 1280*720, and the image is 677-611.
I tried to use clip-path to adapt the video but it doesn't work, here is my CSS:
.video {
text-align:center;
margin:0 auto;
height:auto;
clip-path:inset(0 978px 611px 301px);
-webkit-clip-path:inset(0 978px 611px 301px);
}
I tried applying this style to .video, #videotest and source, it still didn't work as expected.
Is it impossible to use clip-path with videos in HTML5? If so, how can I do it, and if not, how can I make it work?
I will explain myself a little more:
I don't want the image to resize, keeping proportions or not, I just would like to cut off, for example, some pixels left and right, so the image in poster is exactly the same size as the video replacing it. Clip-path seemed to correspond to what I was looking for, but I can't get it to work.
Thanks.
Well Here is the code in HTML you add in the video tag poster="transparent.jpg" to call it by css background and preload="none" to make the poster visible then you make sure to add video's extension that works with the browsers in source tag inside the video tag Unfortunately I couldn't finger out extension that works with safari, It could works if you add the video as one extension to your source folder but I never try
.video {
background:transparent url('http://dev.powered-by-haiku.co.uk/jw-html-config/posters/big-buck-bunny-preview.jpg') no-repeat;
background-size: 677px 611px;
text-align:center;
margin: 0 auto;
width: 677px;
height:611px;
}
video {
width: 677px;
height:611px;
object-fit:inherit;
}
<div class="video">
<video controls="true" id="videotest" poster="transparent.jpg" preload="none">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>
</div>
.svg-clipped-text {
-webkit-clip-path: url(#SVGID_2_);
clip-path: url(#SVGID_2_);
}
<video loop width="100%" height="100%" autoplay class="svg-clipped-text">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/bouncyballs.mp4" type="video/mp4">
</video>
<div class="demo">
<svg height="0" width="0">
<clipPath id="SVGID_2_">
<path id="SVGID_3_" d="M770.5,483c3.1,12.8-2.2,30.7-11.8,39.7L498,770c-9.5,9.1-27.7,13.4-40.3,9.7L113.2,677.5
c-12.6-3.7-25.4-17.3-28.5-30L0.9,298c-3.1-12.8,2.2-30.7,11.8-39.7L273.4,11C282.9,2,301-2.4,313.6,1.3l344.5,102.1
c12.6,3.7,25.4,17.3,28.5,30L770.5,483z"/>
</clipPath>
</svg>
I want to place an image in front of html video. And here is my code so far:
<style>
video.videos {
background-image: url(image.png);
background-repeat: no-repeat;
z-index:1;
}
</style>
<video id="Video1" class="videos" >
<img src="image.png" align="absmiddle" style="z-index:2;" >
<source src="video1.mp4" type="video/mp4"></source>
Browser does not support HTML5. Video could not be loaded.
</video>
But using z-index does not make it working. I mean, the image still remains behind the video file. Is there a possibility to fix this? Maybe any other way?
Place it outside the video tags and use this style to position it:
top: 100px; left: 100px; z-index: 0; position: absolute;
Naturally, you'll need to adjust values for your specific application. If absolute positioning doesn't work for you, you can always use relative positioning, which can be more flexible. See JSFiddle for an example of positioning an image in front of a video.
What you mean with front of html video?
if it's the image poster, you can use this:
<video width="320" height="240" poster="/images/w3html5.gif" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I never had been working with HTML5 video before. I want to be able to set the video to 100% width and it will remained 100% if the browser size had changed. But, it seems not working properly. I tested it on other browser, most of them looks wrong to me.
I was wondering if you can help me out?
http://www.blackwellautomation.ca
Thanks!
atry this;
HTML
<div class="container">
<video id="thevideo" controls preload="auto">
<source src="thevideofile.mp4" type="video/mp4">
<source src="thevideofile.webm" type="video/webm">
</video>
</div>
CSS
.container video {
height: auto !important;
width: 100% !important;
}
If the video is an embed in an iFrame (YouTube, Vimeo etc.) you will need to adopt a different approach - see: http://www.webdesignerwall.com/tutorials/css-elastic-videos