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

1 Answer 1

1

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

2
  • Thanks Adriana! Modifying the height did the trick! Apr 1, 2020 at 12:18
  • @AlexBotham I am glad that this helped you. If this was the solution for you, you can mark this answer as Accepted in the left side ;-) Apr 10, 2020 at 16:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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