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

[Robert]

I have added some MP4 videos from canva under add media to my blog post. Above the videos it shows the text “Video Player”. Also below the video it has 00:00
00:07
The mute, play, and widescreen are below separate from the video. How do I make it look like the original video before I added it to the blog post?

[Elvin]

Hi Robert,

Can you disable the caching plugin/s on the site so we can properly investigate it and trace the issue?

Let us know.

[Robert]

Sure, I would just go to plugins and deactivate it correct?

[Leo]

Please clear it first then yes deactivate it.

[Robert]

Ok, I just did both.

[David]

Hi there,

i force disabled Autoptimize and the Videos load and display correctly.
Looks like the video player doesn’t like the combined/minified Javascript option in autoptimize. Try disabling that option.

[Robert]

Hello,

So I would just untick the…… Aggregate JS-files? Aggregate all linked JS-files to have them loaded non-render blocking? If this option is off, the individual JS-files will remain in place but will be minified.

I did try that and the videos didn’t work correctly.

Thanks

[David]

Can you disable the Autoptimize plugin entirely so i can check again.

[Robert]

Sure, I have deactivated it! Then when I look at the videos now they are working great.

[David]

So there is a setting in Autoptimize that its breaking their code.
First re-enable autoptimize and test to see if they break again.
If they do, disable the JS and CSS settings in Autoptimize one by one to see which one is the cause.

[Robert]

Thank you very much. So I just unticked the option: Optimize CSS Code?

Now the videos work fine!

[David]

Great to hear that 🙂
You may want to check with Autoptimize support about the conflict. You should be able to add:

mediaelementplayer-legacy.min.css

To the Exclude CSS from Autoptimize field in its CSS settings, if you want to re-enable Optimize CSS option.

[Robert]

Awesome! I added the mediaelementplayer-legacy.min.css and it is working fine once I clicked Optimize CSS Code?

Thanks SO much!!!

[David]

Thats correct and it Looks good to me – glad to be of help

[Robert]

Is there a way to make those videos fit correctly in the mobile version? I get this with Google console: Mobile Usability—-Content wider than screen.

[Author]

Posts