Video size and border radius using a shortcode


How can I remove the style attribute from the <video> tag?

I embedded a video on the front page using the video shortcode and applied a border-radius to it with CSS. It looks good.

I modified the video shortcode a bit in functions.php:

add_filter( 'wp_video_shortcode', function( $output ) {

    $output = str_replace( "<video", "<video muted playsinline autoplay loop", $output );
    return $output;


The CSS:

pointer-events: none !important;
border-radius: 20px !important;
background: #f4f4f4;

The problem:

On mobile I want the video width to be 200px. When I shrink the video to 200px with CSS, it loses the border-radius and the edges become sharp again.

I’ve tried everything that I’ve thought of. I also noticed the <video> tag has a

style="width= X; height: X;"

-attribute, and that correlates with the border-radius.

So basically, how can I remove the style attribute from the <video> tag? (or shrink the video some other way for mobile devices while maintaining 20px border radius)

Link to page: Webite

, , Alex Botham 4 years 2020-03-25T16:52:21-05:00 0 Answers 144 views 0

Leave an answer