What causes Safari to display a black border around resized videos?

I've come across a strange issue while using Safari. Whenever I try to play an MP4 video with dimensions of 1920 * 1080, and resize the Safari window to a width of 937px, something strange happens:

https://i.stack.imgur.com/oI50i.png

A black border appears over the video. When I checked the computed style of the video element, it showed that the width is not actually 327 but rather 326 - which has left me puzzled.

However, when I tested the same MP4 video in Chrome, everything seemed fine:

https://i.stack.imgur.com/6xD3w.png

No borders were present on the video in Chrome. The computed style for the video element under Chrome was also as expected:

https://i.stack.imgur.com/9OBOH.png

I attempted to use object-fit: cover to resolve the issue in Safari, but unfortunately, it didn't work.

Does anyone have any suggestions on how I can fix this problem in Safari?

Edit

Here's a gif demonstrating the issue I'm facing:

https://i.stack.imgur.com/5DKWv.gif

cssvideosafari

Answer №1

Changing the default behavior of Safari in this particular case is not possible. Whenever you open the video directly, it will consistently lead to the same outcome. There is no way to control direct media pages such as MP4, MP3, JPEG, GIF, and so on.

Modification

If you want to make adjustments, you can instead embed the video into a basic HTML file (using <iframe> or <video>) and customize the settings there.

To eliminate the black line, you can simply add a border property with a value of 0 to the video element:

video {
  border: 0;
}

This will effectively remove the black line from the video display.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it considered acceptable to include a stylesheet inside the <body> element?

When dividing my web pages into sections, such as headers and content, I find it challenging to avoid placing links to external stylesheets within the <body> tags. I prefer not to combine all styles into one large file or include all stylesheets in ...

htmlcss

The ng-style directive is not functioning properly

After selecting a category, I attempted to change the color using "ng-style" in my HTML code. However, it seems that the color change is not taking effect. This is the snippet from my HTML code: <div ng-repeat="item in ListExpense" ng-class-odd="&apos ...

cssangularjsionic-framework

Using jQuery, learn how to successfully call a selector from dynamic content

I am currently facing a challenge with a table that is generated server-side and then appended to the view page (client-side). Since the table is not directly included in the DOM, I am using the StickyTableHeaders jQuery plugin to create a sticky header fo ...

javascriptjqueryhtmlcss

Navigate to the line situated at the exact midpoint vertically

I have a div with child elements, each containing a line of text. <div id="aboutxt"> <div class="line">TEXT_LINE_ONE</div> <div class="line">TEXT_LINE_TWO</div> <div class="line">TEXT_LINE_THREE</div> ...

jquerycss

tap into adhesive, translucent screen

I designed a webpage with an iframe at the bottom that I set to be transparent so that overlapped elements are visible. However, I encountered an issue where the links beneath the iframe were not clickable unless I disabled pointer-events for the iframe. ...

cssiframetransparency

Is anyone else experiencing differences in the appearance of my mega menu between Safari, Firefox, and Chrome? It seems like

When viewing in Safari, the text overlaps for some reason. It works fine on Firefox and Chrome. Here's a screenshot of the issue: Safari: https://i.stack.imgur.com/hf7v2.png Firefox: https://i.stack.imgur.com/NrOOe.png Please use Safari to test th ...

javascriptjqueryhtmlcsssafari

Implementing jQuery stylesheet using a bookmarklet

Here's a question that may seem silly, but I'm looking to quickly apply CSS styles to a webpage by clicking on a bookmarklet. It will definitely save me time :) For example, this code does the trick: javascript:void( jQuery( ".fancybox-overlay- ...

jquerycssbookmarklet

Error: The @use directive must come before any other rules in Angular

Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...

cssangulartypescriptsass

The persistent space between the navbar and the index page remains despite the suggested fixes provided

There appears to be a discrepancy between the navigation bar and the rest of the page. Despite my efforts to adjust margins, I haven't been able to resolve it. The system is prompting me for more details before posting this question, but I'm unsu ...

csstwitter-bootstrap

Material UI - Clear all designs from the slate

Is it possible to completely override all default material-ui styles and implement your own custom style guide for components? This would involve removing all material-ui styles and starting fresh with customized html skeletons. Creating a new theme with m ...

cssreactjsstylingmaterial-ui

Adjusting the text color of cells in a table based on their values using Ruby on Rails

I have a cell within a table that is formatted like this: <td><%= play_result.timestamp.strftime("%H:%M:%S") + ' ' + play_result.status + ':' + ' ' + '[' + play_result.host + ']' + ' ' ...

cssruby-on-rails

CSS - Guidelines for Targeting Multiple Elements

My CSS code includes several commands that target similar elements, but the resulting design appears messy. I am seeking advice on a more effective way to select these elements in a conventional manner. Despite consulting documentation, I have resorted to ...

htmlcsscss-selectorsconventions

Difficulty with aligning textfield controls to the right

I'm currently working on adding StaticTextField controls to a page. We are using ExtJS, but we incorporate VB.NET methods for implementing ExtJS so manual coding isn't necessary. So far, I attempted to align the text to the right by using this c ...

asp.netcssasp.net-mvcvb.netextjs

The makeStyles feature is currently not functioning properly in the latest version of Next.js with Material UI v5

Currently, I am utilizing nextjs along with material ui in my project "@mui/material": "^5.0.1", "@mui/styles": "^5.0.1", Below is the code snippet of my component structure import { AppBar, Toolbar, Typography, Box ...

cssmaterial-uinext.js

Displaying a specific division solely on mobile devices with jQuery

I need to implement a feature where clicking on a phone number div triggers a call. However, I only want this div to be displayed on mobile devices. To achieve this, I initially set the div to "display:none" and tried using jQuery to show it on mobile devi ...

javascriptjqueryhtmlcss

Is there a way to choose columns 2 to 6 of the row that is currently selected

I am looking to create a hover effect for columns 1 through 7 of a row where, when the user hovers over any column within that range, certain styles are applied to all columns in the row except for columns 1 and 7. This means that the background color shou ...

css

Guide to transforming Tailwind CSS into a class and saving it in a CSS document

Recently, I implemented Tailwind CSS to style my application. It has been a helpful tool, but I am looking to consolidate all the CSS into one file for better organization. I want to keep it separate from the HTML code. My attempt to convert the following ...

cssreactjstailwind-css

Animation of lava effect in Angular 7

I have a unique Angular 7 application featuring a homepage with a prominent colored block at the top, along with a header and various images. My goal is to incorporate lava effect animations into the background similar to this CodePen example. If the link ...

cssangulartypescriptangular-animations

Tips for incorporating captions into a slideshow

I've been experimenting with different methods to include captions in my slideshow, but haven't had much success. I simply want to add a div at the bottom of each image. Do I need to modify my script or should I consider adding something else? H ...

jqueryhtmlcss

Adjust the maximum and minimum values on a dual thumb slider

I have implemented a two thumb range slider to define the maximum and minimum values. However, I recently discovered that it is possible for the thumbs to cross over each other - the max value can exceed the min value and vice versa. I am looking for a s ...

javascripthtmljquerycss