Add video mp4 to WordPress blog post, page, that will works on mobile?

Here is how you can add an mp4 video in a WordPress post or page.

If you know a bit of css and a bit of html, you can adapt the following code.

My code will just display the mp4 video only for mobile phones (on devices with a smaller screen than 800 pixels).

You can put the code inside a WordPress post or page and it will work.

The trick is that you can’t have spaces between the css code as WordPress will just add html paragraph tags.

If you have questions, leave in the comments.

My code works great for iPhones, it will display the video and play it in a loop.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style>
.wide-video{
width:100%;}
@media (max-width: 800px) {
.mobile {}
}
@media (min-width: 800px) {
.mobile {display:none !important;}
}
</style>
 
<div class="wide-video">
<div class="mobile">
 <video autoplay loop muted playsinline class="video-background wide-image">
            <source src="http://www.incvice.com/wp-content/uploads/2017/05/video_file.mp4" type="video/mp4">
        </video>
</div>
</div>

If you want the video to be displayed on desktop screens as well, just remove the display none css option from the code.