MP4 Video

When designing a responsive website video players nee special consideration. Not only is a standard MP4 video way too big for downloading on mobile phones but they are not the best aspect ratio for phones in portrait mode.
Poster Images
Video players for responsive pages must display a poster image on page load and prevent the actual video file from downloading in the browser until the vivtor actually hits plays button.
The poster images should have the same aspect ratio as the video files. In this case 9:16 for the landscape video and 9:16 for the phone version.
In this example the images are 640 x 336px and 252 x 480px respectively.
MP4 Video Files
Video files tend to be huge so make sure they are reduced to a suitable size. In this case the video files were reduced to the same size as the poster images using the freeware Miro Video Converter.
Container
Video files also need their title displayed in the same container so that the search engines can index them. The container in this case is an HTML5 <figure> with the title displayed in the <figcaptiion> element.
The video can have a border if required and the container has controls to add padding.