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:

#video-246-1_html5{
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

Topic video-player shortcode css Wordpress

Category Web


I think that happend because when you reduce the width of the video the height still the same as before and the border radius does't affect. See the following image:

Look what happen here

Do you see in the image how the radius of the edge looks a little cut when I leave the video with a higher height?

I think one solution could be, besides change the width to 200px, also change the height to same or similar as you can see in the following image.

enter image description here

Try it and let me know if this helps :-)

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.