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

What is causing my sprite image to be cropped?

I'm currently working on implementing a progress bar handle for my website. While the progress bar functions perfectly, I'm encountering an issue where the handle gets cut off when placed above the bar. Please refer to the attached image for refe ...

htmlcss

When the header is given a fixed position, the modal becomes unattainable

I am currently working on developing my personal news website called News Pews. This is my third project, and I have encountered an issue that was not present in my previous projects. The problem arises when I apply position: fixed; top:0; to the header c ...

htmlcssmodal-dialogbootstrap-5bootstrap-rtl

Utilizing JavaScript to implement conditional if-else statements on CSS properties

I am trying to implement conditions on CSS properties in JavaScript. What is the most efficient approach to achieve this? <html> <head> <title>TOOLTIP USING JAVASCRIPT</title> <style> span{ curso ...

javascripthtmlcss

Issue with the text wrapping of Angular mat-list-option items

When the text of my checkboxes is too long, it doesn't wrap properly. Please see the image below for reference: Click here to view Checkbox image and check the red box Here is my HTML code: <mat-selection-list #rolesSelection ...

htmlcssangular

Flexbox not rendering correctly on IE and Chrome browsers

Initially, I avoided using flexboxes because of concerns about older browser support. However, the alternative involved floats, margins, z-indexes, and resulted in a layout that was visually unattractive. Despite setting specific dimensions for the left-h ...

htmlcssflexbox

Change the size of a custom cursor on click using React

I have customized the cursor on my react app, but I want to make it animate when the user clicks. Perhaps by decreasing its size or some other effect. The cursor is within a component that I've included in my Index.js file. I am unsure how to create a ...

cssreactjscss-selectorsmouse-cursorcustom-cursor

Troubleshooting Bootstrap image alignment problem with columns on extra small screens

My website showcases screenshots of my software in a div element. Everything looks great on larger screens, but once I switch to a phone or resize the window, the images don't align properly, leaving empty space. Refer to the image below for clarifica ...

htmlcssimagetwitter-bootstrap-3alignment

The screen reader seems to be malfunctioning as soon as I include this particular code

//Finding the height of the header let headerHeight = document.querySelector('header'); let height = headerHeight.offsetHeight; //Adjusting the #navbarNav's top margin to accommodate the header let nn = docu ...

javascripthtmlcssbootstrap-4accessibility

Creating Positioning Magic with HTML Elements

Currently working on an ASP.NET web app that utilizes a Master, with just a GridView at the bottom and a DIV at the top for further development. The goal is to keep the top DIV or header fixed while scrolling, ensuring it remains in place at the top of th ...

javascriptjqueryhtmlcssasp.net

Dynamic parallax or stacked vertical text animation

I am attempting to replicate the text effect found on . The text is centered both vertically and horizontally within each div, but as you scroll down, the top position shifts creating a parallax effect. As you continue scrolling, the text transitions to th ...

jquerycssparallax

Is anyone else experiencing issues with loading a font from a CDN? It works perfectly fine on Chrome Browser and Safari for iOS Simulator, but for some reason, it's not loading

It's driving me a bit crazy as I'm not sure where I've gone wrong. I'm currently working with NextJS and have loaded this font into my <Link />. While it displays perfectly on Chrome and Safari in the iOS simulator, it fails to l ...

javascripthtmlcssnext.js

Building a Table Using HTML and CSS

I'm currently tackling this school assignment and have hit a roadblock with two issues. The HTML Validation error I'm encountering is regarding a table row that is 5 columns wide, exceeding the established count by the first row (4). From line 7 ...

htmlcss

Examining website design on an IOS device from a Windows computer

Is there a way for me to test HTML files from Windows on iOS8 (Local Files)? I have tried Adobe Edge Inspect, but it only works with servers. Are there any free cloud hosts that allow for HTML, CSS, and JS files? Edit: I apologize if my question was not c ...

htmlioscsscloud

Accordion menu causing Javascript linking problem

After following a tutorial, I managed to create an accordion menu in JavaScript. In the current setup, each main li with the class "ToggleSubmenu" acts as a category that can hide/show the sub-lis. Now, my query is this: How can I retain the link functio ...

javascriptjquerycssaccordion

HTML - No alterations to Writing Mode

Hello everyone, I'm attempting to display a header vertically in my table but the writing-mode property is not having any effect. CSS .VerticalText { writing-mode: tb-rl; } HTML <td rowspan="6" id="tableHeader" class="Border"> <h1 cl ...

htmlcss

What could be causing this program to continuously add values to the message table whenever the page is refreshed?

Looking for a simple chatting system using php, mysql, html, css and javascript? Check out this code snippet. However, there seems to be an issue with the message sending functionality. Every time a user sends a message and refreshes the page, the same m ...

javascriptphphtmlcssmysql

Creating an Innovative Grid Design with Varying Column Widths for Each Row

Seeking advice on achieving a specific layout using HTML. I have attempted to use HTML tables but struggled with creating rows with varying columns. Does anyone have recommendations for grid tools that may be more helpful? Thank you ...

htmlcsslayout

Experience a captivating Bootstrap 4 drop menu animation that emerges from beyond the borders of the page

I have a row that contains two divs, one with col-md-11 and the other with col-md-1. Inside the col-md-1 div, there is a dropdown that I want to animate. I am using animate css for the animation, but the issue is that the slideInRight animation starts from ...

htmlcssanimationbootstrap-4

The drop-down links vanish into the depths of the webpage's body

Can someone assist with my drop-down menu issue for the link "services"? The link disappears behind the page content when I try to modify it. Any help would be appreciated, thank you! This is the CSS: .bodycontent { margin: 0 25% 0 25%; ...

htmlcssdrop-down-menumenuhyperlink

Focus on a specific button based on its text inside

Two buttons are present with the same class but different content <a class="button ordrViewBtn">Sold Out</a> <a class="button ordrViewBtn">Re-Sell</a> I want to change the color of the "Sold Out" button. Is it p ...

htmlcssbutton