https://github.com/gnowland/html5-video

A lightweight, bulletproof HTML5 Video solution for IE, Firefox, Chrome, Safari, Opera, iOS and Android
https://github.com/gnowland/html5-video

Last synced: about 1 month ago
JSON representation

A lightweight, bulletproof HTML5 Video solution for IE, Firefox, Chrome, Safari, Opera, iOS and Android

• Host: GitHub
• URL: https://github.com/gnowland/html5-video
• Owner: gnowland
• Created: 2014-12-17T20:53:43.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2014-12-17T22:06:51.000Z (almost 10 years ago)
• Last Synced: 2023-08-01T09:22:08.585Z (over 1 year ago)
• Homepage:
• Size: 917 KB
• Stars: 0
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
Responsive Bulletproof HTML5 Video

=======================

About

-----

Adapted from [csscallum](https://github.com/csscallum/HTML5-Video/)'s "Bulletproof HTML5 Video" with responsiveness added.

-   Be sure to change `.videoContainer { max-height: 1200px; }` and `.videoContainer video { max-width: 1920px; }` to the max-width and max-height of your video.

This solution only requires two video formats, MP4 and WebM, with a Flash fallback using the .mp4 file for older browsers that don't support HTML5 video.

### WebM & MP4

WebM is the standards based video format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video and is supported in *Chrome*, *Firefox* and *Opera*. *IE9* (and up) and Safari only supports the more commonly known MP4 video as do both *iOS* and *Android* devices.

Support

-------

Browser/device support include Internet Explorer, Firefox, Chrome, Safari, Opera, iOS, Android and the Blackberry Browser. The only dark area is in Opera Mini which does not support the Video element.

Demo

-----

[Can be viewed here](https://rawgithub.com/gnowland/HTML5-Video/master/index.html).