So I have come across an interesting bug for which I haven't been able to find a solution yet, I have tried the ones I could think of to no result. The issue is as follows -
There are artefacts (horizontal and vertical see-through lines) on the video element if -
border-radius is directly applied to the video element.
border-radius is applied to the parent of the video element, with overflow: hidden.
Example code -
<html>
<body style="color: #fff;background-color: #00f;">
<p>
Original video is hosted at -
<a style="color: #fff"
href="https://streamable.com/6jly2">
https://streamable.com/6jly2
</a>
(create a download link and use it here)
</p>
<h1>Border Radius on VIDEO</h1>
<video width="400px" style="border-radius: 30px;" autoplay muted loop>
<source src="https://dl3.webmfiles.org/big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
<h1>Border Radius on Parent DIV</h1>
<div style="display: inline-block;border-radius: 30px;overflow: hidden;">
<video width="400px" autoplay muted loop>
<source src="https://dl3.webmfiles.org/big-buck-bunny_trailer.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</div>
<h1>Border Radius with Child DIV</h1>
<div style="display: inline-block;border-radius: 30px;overflow: hidden;">
<div style="background-color: yellow;width: 400px;height: 225px;"></div>
</div>
</body>
</html>
Example screenshot (focus hard to see the white lines) -
In the screenshot it seems as the lines are white, but actually they are see-through (compression at work :(), you can reproduce the scenario in your local and see the exact phenomena.
I'm using Chrome 72.0.3626.121 (Official Build) (64-bit) on Mac OS X.
I believe that this issue is being caused by clipping logic that might be used to achieve border-radius effect, don't know for sure. If anyone knows that this is a well document bug please let me know as I wasn't able to find it and hence asking the community here.
I did manage to find one similar issue here - Chrome/WebKit creating a solid bar when using background, border-radius, and top/bottom borders
But doing that resulted to no success. If anyone has any ideas as to why this is happening and what can be the solution (even if not available I will be happy to understand why), please help out.
Related
Was originally trying to get a .svg to mask a div. After spending a few hours trying to apply related examples I couldn't get it working.
Have been gradually working back to the most basic example of masking, just to get something going, but cant seem to display it as indicated in the example. I am quite certain that I have replicated it exactly as shown here https://www.w3schools.com/css/css3_masking.asp however there is no masking with the files I have outputted (have included an overview of my file here). Used chrome (version 101), Microsoft edge, and firefox with the same result.
<!DOCTYPE html>
<html>
<head>
<style>
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>The mask-image Property</h1>
<h3>An image with a mask layer image:</h3>
<div class="mask1">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</div>
<h3>Original image:</h3>
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</body>
</html>
If anyone can give me an indication of what is happening with the above example, that would be really handy. Also if the next step of masking a div (not just an image) with a svg (ideally within the css) that would be phenominal.
The ideal workflow I would be looking for would be to output a .svg mask and be able to apply that to a div and anything in it.
I have a video that I am trying to position over a section on a website. On my test server the position is perfect but when I upload my new file to the online server the video stays centered and below all the other info on the site. How do I code this so the index1 file displays the video like my test server.
The code on my test server is:
<div class="#main_video" id="main_video">
<video width="460" height="260" controls>
<source src="include/promo_2012.ogv" type="video/ogg">
<source src="include/promo_2012.mp4" type="video/mp4">
</video>
</div>
I selected the div and positioned it at:
Relative<br/>
Top: -414<br/>
Left: -266
Any help would be greatly appreciated.
-Josh
Try,
#main_video{
float:left;
}
This should put it to the left. Here's a live example: http://jsfiddle.net/S6mmD/
And by the way, classes are used in HTML like so: <div class='red'> and in CSS: .red{color:#f00;}
ids are styled in CSS with the pound sign # like above.
Hoping someone here can help me, I installed a wordpress theme on a site ( http://nationalaviationinstitute.ie/ ) and I have an issue I can't resolve and the developer of the theme is refusing to acknowlege the issue!
If you visit the above site in Chrome, the bottom section of the site jumps up and covers the four service areas underneath the image slider. This only happens in Chrome, it's ok in all other browsers, it's obviously something to with the responsiveness of the site as if you resize the bottom section moves back to the correct position.
I'm fairly familiar with CSS and HTML so if anyone could give me a hand figuring out the cause of this and a possible solution I'd greatly appreciate it.
Thanks,
Anthony
There is a javascript bug which is giving the divs inside each <li> tag style="height: 0px;" on resize event like the example below:
<li class="span3 thumbnail">
<div class="block-thumbnail maxheight col" style="height: 0px;">
<i class="icon-3x icon-cogs"><i class="circle-border"></i></i>
<h3>Our Courses</h3>
<p>At NAI we have a number of different courses to suit everybody’s needs, academic to professional. <a class="link" href="http://nationalaviationinstitute.ie/courses/">read more →</a></p>
</div>
</li>
if you find and fix the js that is causing this problem than the problem will be fixed.
But incase you need a faster fix you can add the following css:
.block-thumbnail{
display: inline-block;
}
It will override the style="height: 0px;" added by the js and the bottom section will be pushed down
Is it possible to cross-browser style the controls of a browser-native video such as video from HTML5's video tag?
I do not understand if it is possible or not, I can't find anything other than this article but it seem uses Javascript.
I would like to make the controls bar fit the video width; as you can see from the image attached, the controls bar excedes the video width.
HTML for the above image
<div class="video centered-content">
<a class="circle-canvas close-video" href="javascript:void(0)" id="video-close" rel="tooltipTOP" data-original-title="close">X</a>
<video width="63%" height="60%" id="video" class="video" controls>
<source src="<?php echo base_static_url();?>media/video.mp4">
<source src="<?php echo base_static_url();?>media/video.ogv">
<source src="<?php echo base_static_url();?>media/video.webm">
</video>
</a>
</div>
Here is a good example for styling native player controls(just tested in Chrome): https://codepen.io/BainjaminLafalize/pen/GiJwn
To change the width of the player controls bar:
video::-webkit-media-controls-panel {
width: 40px;
}
You can style native controls in some browsers, using shadow DOM. Enable shadow dom in debug inspector settings:
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
HTML5 Video Controls - make larger?
You could style the shadow DOM, but you need to look at every browser individually and a browser update could destroy your styling.
I recommend taking a look at MediaElement.js which gives you cross-browser controls that can be styled using CSS and are already accessibility-optimized.
Or if you only need a few controls anyway, build your own: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics
I am using a HTML5 video tag in my website. That video is playing perfectly with all browsers, but in IE9 it shows a black border(black extension). It is like the one usually the video players will show some black color extension on its both the side when the size of the player is more than the size of the video.
This is the solution we use.
For video, we display HTML5 by default backed in CDN storage. We also have fall back for Flash and then fall back for non-flash. So it checks HTML5 first, then flash failing that and then no content for non-flash support indicating some message about the user to upgrade their Fred Flintstones machine, we also offer an alternative so they can move out of BedRock!
Code
<style type="text/css">
.videobox{position:relative;width:300px;500px}
#video_box_id_css, .video_box_class{border:0px !important}
/* BACKGROUND SHOULD BE PAGE BACKGROUND */
.left{position:absolute;width:3px;height:500px;left:1px;z-index:10;background:#fff}
.right{position:absolute;width:3px;height:500px;right:1px;z-index:10;background:#fff}
</style>
<div class="videobox">
<video id="video_box_id_css" class="video_box_class" autoplay loop width="300" height="500">
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_VP8.webm" type='video/webm'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_libtheora.ogv" type='video/ogg'/>
<source src="http://video.cdn.com/xxxxxxxxxx/704_black_x264.mp4" type='video/mp4'/>
<!--
ALTERNATIVE CONTENT LIKE SWF
VIDEOS FOR NON HTML5 BROWSER
//-->
</video>
<div class="left"></div>
<div class="right"></div>
</div>
Code Info
Our code is above (removed the flash so it is more readable). A side thing to note is we add a left and right div column which goes over the video black borders. You can tweak these and even add a bottom and top if needed.
Photo
The green border is actually the white div in opacity so you can sit the effect. It may be hacky but it the best solution we found.
Final
The result is much better as you can see below:
I've had this issue before, usually the problem lies within the video itself. When you encode your video try to match the settings as closely as possible to what you will use in your tag. It shouldn't be a roadblock for you, once you inspect the video a bit closer you should see a discrepancy.