Question 283037 in Html Question posted in
Some basic documentation can be found here.

HTML video tag: rounded corners are pixelated

I am trying to show a video with rounded corners, but on the bottom corners, it is pixalated (as showen on the attached screenshot).

This is the HTML code I have tried:

<div class="container1">
      <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1" onclick="controlsChangeVideo1()"></video>
</div>

And this the CSS:

.container1 {
    margin-left: 50px;
    margin-right: 425px;
    margin-top: 50px;
    border-radius: 20px;
    overflow: hidden;
}

enter image description here

Tags:

2

Answers


  1. 0

    You can try this code for a more precise result.

    HTML
    `

    <div class="container1">
    <div class="video-container">
        <video src="Videos/Film 1.mp4" poster="Thumbnails/Film 1.jpg" class="video1" id="video1" onclick="controlsChangeVideo1"></video>
    </div>
</div>

    `

    CSS
    `

    .container1 {
    margin-left: 50px;
    margin-right: 425px;
    margin-top: 50px;
}

.video-container {
    border-radius: 20px;
    overflow: hidden;
}

.video1 {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px; /* Adjust this value as needed */
}

    `

    Login or Signup to reply.
  2. 0

    This is because the size of the container does not actually match the size of the video. To make the container match the size of the video player you could use min-content.

    However, if you add a border to the container, you will notice a extra space below the video. The reason of this is because video is defaulted to inline display, causing the extra space based on the line-height. The suggested way to remove this space is to make the video display:block.

    Extra padding

    .container1 {
  margin-left: 50px;
  margin-right: 425px;
  margin-top: 50px;
  border-radius: 20px;
  overflow: hidden;
  /* add the following lines*/
  width: min-content;
  height: min-content;
}

video {
  display: block;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search