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