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