What is the best way to give a video a border-radius in an HTML/CSS code?

Is there a way I can apply border-radius to the <video> element?
This is what my video currently looks like:

(image shown here: <a href="https://i.sstatic.net/izKz0.png")

I attempted styling the video tag with CSS, but the changes didn't take effect.

Below is the code snippet I used:

/*CSS*/

video {
border-radius: 10px;
}
<!HTML!>

<div class="fp-player">
<center>
<div id="instructions">
  <video id="my_video_1" class="video-js vjs-default-skin" width="320" height="240"
      controls preload="none" data-setup='{ "aspectRatio":"640:267", "playbackRates": [1, 1.5, 2] }' poster="https://example.org/image.png">
    <source src="https://example.org/video.mp4" type='video/mp4' />
  </video>
  </center>
    </div>

htmlcssvideostylingborder-radius

Answer №1

To enhance the appearance of the video, encase it in a div element with the following style properties: 

div {
  border-radius: 10px;
  overflow: hidden;
  z-index: 1;
  height: 320px;
  width: 480px;
}

This tip was discovered on Adding border-radius for embedded YouTube video

Answer №2

One possible solution is to delete your browser's history.

Answer №3

Need some assistance? Check out this helpful example

HTML

<!DOCTYPE HTML>
<html>
<head>

<style>

#video1 {
border-radius:10px;
}

</style>

</head>
<body>

<video id="video1" class="video-js vjs-default-skin" width="320" height="240" controls preload="none">
    <source src="https://example.org/video.mp4" type='video/mp4' />
  </video>

</body>
</html>

Please apply the style rule "border-radius:10px;" to the video 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

How Webpack 4 Utilizes splitChunks to Create Numerous CSS Files

I need to create multiple CSS files using webpack 4 with the min-css-extract-plugin and splitChunks plugin. Here is my webpack configuration. const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const path = require("path"); module.exports = ...

csswebpackwebpack-4webpack-splitchunks

Python does not render the HTML string from a variable when using Mako

Trying to render a string variable in a Mako template like: ${variable_name} The variable contains HTML content, but it is not displayed correctly. Instead of rendering the HTML, it just shows the source code like: <div>...<p>..</p>...&l ...

pythonhtmlxmlodoomako

What is the best way to specify the dimensions of an image with CSS or Bootstrap?

I am facing some challenges while building my website. The ideal look of the page is represented by home_page_ideal. The issue arises with the small boxed image on the top left corner. Once I scroll to the top, the page displays as home_page_issue. The CSS ...

htmlcsstwitter-bootstrap

Unable to grab hold of specific child element within parent DOM element

Important Note: Due to the complexity of the issue, the code has been abstracted for better readability Consider a parent component structure like this: <child-component></child-component> <button (click)="doSomeClick()"> Do Some Click ...

javascripthtmlangulartypescript

Angular 6 - Unlocking the Secrets of Filtered Results

I need help accessing the filteredArray in my .ts component. Currently, it is only accessible within the ng-container. <ng-container *ngIf="(userList | filter: 'name' : value) as filteredArray"> <tr *ngFor="let user of filteredArray ...

htmlangularfilter

Television Mount for Precise Video Placement

Seeking assistance for a unique positioning challenge I am facing. I have a Video that needs to be placed on the home page with a TV-like image "frame" around it, and they should scale together. https://i.sstatic.net/2pLhi.png What I've attempted i ...

htmlcss

Webpack is notorious for creating multiple copies of images

Having an issue with Webpack where it's generating duplicate images, one of which is broken. I have an original image image, and after running Webpack, two duplicates are created. One works fine: image, but the other one is broken: image. I'm us ...

javascriptcsswebpack

Continuous scroll notification within the fixed menu until reaching the bottom

I'm looking to achieve a scrolling notification message that stays fixed at the bottom of a top-fixed menu while the body content continues to scroll normally. Here's an example in this fiddle: HTML: <div class="menu-fixed">I am a fixed me ...

javascriptjqueryhtmlcss

The flashing of Bootstrap tabs can be seen on various pages

Currently, I am encountering an issue with bootstrap tabs on my website. There seems to be a blinking problem with the tabs on certain pages. Check out this video showcasing the blinking tab in the search result page: Watch Here Interestingly, the same ta ...

jqueryhtmlcsstwitter-bootstrap

Why is my card not laying flat in a horizontal position?

Could you please assist with aligning the cards horizontally in a row instead of vertically? I would like to have 3 cards in one row. Thank you. <div class="container"> <div class="row"> <div class="col-md-4"> <di ...

htmlbootstrap-5bootstrap-cards

Having difficulty swapping out images on an HTML website template for Internet Explorer

Recently, I obtained an HTML website template that I am currently working on customizing. One of the tasks I have been tackling is replacing some of the existing images with my own. After resizing the new images to match the dimensions of the originals, ...

htmlimagegoogle-chrometemplates

Adjusting content alignment for mobile devices and centering on desktop screens

I am currently working on creating a responsive website and I have a specific layout in mind. I want to center some text and an image both vertically and horizontally within a div that has a minimum height, leaving plenty of blank space above and below the ...

htmlcsstwitter-bootstrapbootstrap-5

The Bootstrap Mobile Navigation transition is not displaying as intended in my CSS coding

On both desktop and mobile screen sizes, I have a white navigation bar. However, for the mobile dropdown menu, I want the background to be grey. I managed to achieve this by targeting .show on smaller screens in the CSS and specifying the grey background ...

javascriptcssbootstrap-4nav

Issue with fixed header in Vuetify v-data-table not functional

While working with the Vuetify v-data-table component, I have enabled the fixed-header property. However, I have noticed that the table header is scrolling along with the table body. I am using the latest version of Chrome. Does anyone know how to addres ...

htmlcssvue.jsvuejs2vuetify.js

Collaborative spreadsheet feature within a browser-based software platform

I am using an Angular-based SPA for my web application. My goal is to be able to open an Excel file within the application itself. Currently, I have a menu button or link that is linked to a specific path, for example //192.168.10.10/sharedExcels/myExcel. ...

javascripthtmlexcelangular

Can an image be resized to fill either the full height or width based on its orientation?

Looking to display a dynamic list of images with varying sizes and orientations - some landscape, some portrait. The challenge is that the landscape images should fill 100% width of their parent container, while the portrait images should fill 100% height ...

htmlcss

Having trouble with the functionality of a simple jQuery toggle menu on mobile?

I am experiencing an issue with a simple toggle menu that utilizes jQuery's on: tap feature, but it is not functioning as expected: <nav id="mobile-nav"> <ul> <li>Item 1</li> <li>Item 2</li> ...

javascriptjqueryhtmlioscss

to return the value to default when deactivating the text input field

Implementing typeahead functionality on two input fields: <div class="form-group> <label class="control-label=">Product Code:</label> <input placeholder="Enter Value" type="text" class="form-control" ng-model="a.product ...

htmlangularjs

Utilizing a dropdown feature in Bootstrap for creating X columns of lists instead of a traditional single list

Check out my Fiddle. Beneath Dropdown1 lies a single-column list of actions. I'm looking to expand this list across multiple columns, like 5 or the width of the page. I'm hoping there's a Bootstrap CSS class I can use for this, but I migh ...

jqueryhtmlcsstwitter-bootstrap

CSS: Fixed item at the bottom of a container that scrolls horizontally

I am working on creating a sticky footer within a horizontally scrolling element. I want the sticky footer to be positioned at the bottom, adjust its height based on the content inside it, and match the width of the scrollable parent (in this case 200px). ...

htmlcssstickysticky-footer