[Resolved] Uploading a MP4 video from Canva to my blog post.

[David]

The original code ‘should’ be responsive… but i assume the source code didn’t provide that.
You can try adding this CSS:

.mejs-container, .mejs-overlay.load {
	width: 100% !important;
	height: 100% !important;
}
.mejs-container {
	padding-top: 56.25%;
}
.wp-video, video.wp-video-shortcode {
	max-width: 100% !important;
}

[Robert]

I copy and pasted that into: Appearance —> Customize —> Additional CSS.

Still is showing too wide for the mobile version.

[David]

Any particular reason to not use the built in Video Block ? It just needs the URL for the video – as that will be responsive ?

[Robert]

I just didn’t know how to do that, but will give it a try now. Thanks for the idea!

Although I use the classic editor, so I don’t know if that changes things?

[Tom]

Hi there,

You would need to use the block editor in order to use the Video block.

Otherwise, you may need to look around for some “responsive video CSS” for one that works with your current set up.

[Robert]

Thanks Tom.

I’ve tried a few ones I found online but unable to get the videos to fit the width in mobile versions still. I will continue to look and hopefully get lucky.

Congrats on developing such a great theme! I’ve already recommended it to a few friends.

Thanks,

-Robert

[Tom]

Thank you! Appreciate it 🙂

[Author]

Posts