Why is it that the dimensions of the video player alter when I include a poster image?

After browsing numerous discussions on this topic, I have encountered an issue where adding a poster image to the video element causes the size of the video player to change.

<video src="/video.mp4" poster="/image.jpeg" class="videoPlayer" controls playsinline />

.videoPlayer {
  cursor: pointer;
  object-fit: cover;
}

img, video {
  max-width: 100%;
  height: auto;
}

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  vertical-align: middle;
}

I am curious about the potential reasons behind why the video size is being impacted by the presence of an image. Any insights or solutions would be greatly appreciated.

htmlcss

Answer №1

The dimensions of the video player are determined by its current frame.
When the poster image is shown, this "current frame" refers to the poster frame. Therefore, it's the poster frame that dictates the size of the video player.

If no other specifications for the video size are provided (such as using the width or height attributes or CSS styling), then this intrinsic size serves as the basis for determining the display size of the element.

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

Searching for data in a bootstrap table that is not case-sensitive

Searching for and highlighting text within a bootstrap table has proven to be a challenge. Check out the Fiddle for an example: https://jsfiddle.net/99x50s2s/74/ HTML <table class='table table-bordered'> <thead> <tr& ...

javascriptjqueryhtmlcsstwitter-bootstrap

The precedence of theme CSS is paramount

Check out this link for Smirnoff Espresso Vodka 70cl (password: hide) Upon inspecting the page source, you'll see that my main stylesheet (main-style) is loaded at the top of the head section with high priority, even above my theme's style. Why ...

csswordpress

Tips for iterating through a JSON object in JavaScript and building a table from it

My JSON data is structured like this: diferencias = { "1": { "1": 543.0, "0": 542.0 }, "2": { "0 1": 0.3333333333333333 } } I am trying to create a table with the outer keys as columns. This is the code I have written ...

javascripthtmljson

Establish a comprehensive background for your Angular project

I've been struggling to figure out how to set a background image for my entire angular project. I've tried using global css and the app.component.css file, but it only sets the background for the component area. Here is a snippet from my global ...

cssangularbackground-image

Hexagonal design reminiscent of a beehive

I am struggling with implementing a specific layout using grid CSS and I'm open to using flex or any other method. .container { display: grid; grid-template-columns: repeat(auto-fit, 50px); grid-template-rows: repeat(auto-fit, minmax(80px, 80px)); ...

htmlcssgrid

Calculate the combined total of two inputted values instantly

Is there a way to add two separate numerical inputs together in real-time and display the sum in a third variable? Here's a clearer explanation: First Variable: 100 (input) Second Variable: 150 (input) Sum: 250 (calculated, not input) Any suggesti ...

phpjqueryhtmlsumreal-time

Redesigning the reset Zoom feature of HighCharts using a button inspired by Material UI styling

Currently, I am developing a project that incorporates HighCharts and Material UI for the user interface design components. I am wondering if there is a method to substitute the default HighChart reset Zoom button with the Material UI button component? ...

cssreactjsuser-interfacehighchartsmaterial-ui

Show or hide a div through two variables that toggle between different states

It's possible that I'm not fully awake, so missing the obvious is a possibility. However, I have 2 variables that determine whether a div has a specific class or not. The class functions more like a toggle; so the following conditions should tri ...

javascripthtmlangularjs

Change the background color of the entire grid page to create a unique look

Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...

htmlcsscss-grid

CSS :empty selector failing to target elements

I have a situation where I utilized the :empty selector within the .error class. However, I'm encountering an issue where even if there is no content inside the div with the error class, the error class does not get removed entirely. Upon examination ...

csscss-selectors

I need some guidance on how to create this using CSS, or what keyword should I use to find a similar solution

My client's website requires this specific design, but I am struggling to find a similar CSS format online. Can you provide assistance in creating this layout? Attached is an image for reference: https://i.sstatic.net/gJua4.png ...

css

arrange a div inside another div

I'm struggling to grasp the concept of how divs function in HTML. Below is a snippet of my HTML code: <div id="user_p"> <img src="img/pp/djbaptou.jpg"> <div class="followings"> djbaptou </br> Baptiste Arnaud </br> ...

htmlcss

Arranging elements within a div using inline positioning

Currently, I am trying to arrange elements within a div. Below is the div that needs positioning: https://i.sstatic.net/5nZUt.jpg This is the desired layout: https://i.sstatic.net/vXSV9.jpg Here is the HTML and CSS code snippet: #channel-header * { ...

htmlcsselement

Employing delegate for switching roles between classes

I'm having trouble using the jQuery delegate function to toggle classes. What I want to achieve is toggling the class of <li class="unselected-values"> to <li class="<li class="unselected-values"> when the client clicks on the label ...

jquerycssrazordelegates

Utilizing HTML data retrieved from an ajax request

I am utilizing a load more button to display content fetched from a database via ajax. Here is how the ajax call is structured: // JavaScript Document // Function to load more builds $(document).ready(function(){ var pageIndex = 1; $('#loadmorebuild ...

javascriptjqueryhtmlajaxjson

What is the best way to separate text entered by the user into its individual characters?

Is there a way to allow users to drag each character they type on the screen individually? I'm trying to figure out how to access and manipulate each character the user enters. In the example below, I can manipulate each character of the word "place ...

jqueryhtmlcss

The data integrity was compromised at /notes/add due to a failure in the NOT NULL constraint for the created field

Having encountered an issue while trying to execute the add function in Django2, I am unable to create a new post. The error message is as follows: IntegrityError at /notes/add NOT NULL constraint failed: notes_note.created Please find the views below: ...

pythonhtmlcssdjangoweb

I'm currently attempting to search for a city using AngularJS, but I'm encountering some difficulties

Please take a look at this example on Plunker and let me know if you see any issues: Plunker Example ...

htmlangularjs

Creating HTML using JavaScript

This particular issue has been a challenge for me despite its apparent simplicity. I have a Javascript code that is responsible for constructing elements in the DOM by utilizing JSON data from a server script. Within this code, some of the elements include ...

javascripthtmlsyntax

Customizing the layout of a Bootstrap carousel by adding HR lines both above and

I have set up a bootstrap carousel to showcase numerous images, with the carousel indicators serving as image icons. I am looking to add horizontal lines above and below these icons. How can I achieve this? Currently, the icons functioning as carousel ind ...

htmlcsstwitter-bootstrapbootstrap-4