2

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

New contributor
Alex Botham is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
0

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 :-)

Your Answer

Alex Botham is a new contributor. Be nice, and check out our Code of Conduct.

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for?Browse other questions tagged or ask your own question.