Video tag Webkit Issue Resolve the Width and Height

There are lots of ways to display a video on your webpage. But now days a very common way to insert video in our application by using video tag in html5 to play the video on the website. Video tag takes static width and height in aspect ratio. But we face some issues when we put our custom width/height of video tag webkit issue. If you give your own width and height, different from the video aspect ratio, it will take some space in width or height. You can see this issue by adding border or background beneath the video tag. I am sharing some CSS solution to fix the video tag width or height issue.

Sometime you can get the resolution of this problem on the web like use the object-fit property in css object-fit:cover. You can fine the below code and your problem will be solve by the code. I am sharing our experience.

Video tag Webkit Issue Resolve

Here is your HTML video to resolve the video tag webkit issue

HTML Video Tag

In the above html coding, the video tag will work fine because of the 320×240 width height in video aspect ratio.
Now I am customizing the width and height a bit:

HTML

Above the custom width/height 300×300 is not acceptable aspect ratio width and height. We need to fix it using CSS. Actually Webkit browsers take some default CSS width and height in ratio 320×240 and set default CSS property [object-fit: contain;] to which we need to override its property.

Just override it with [object-fit: inherit;] and it will work perfect in Webkit browser.

CSS

October 20, 2017 by admin
One Comment

Add a Comment

Your email address will not be published. Required fields are marked *