├── rain.mp4
├── index.html
├── README.md
├── 9x16-resize.js
└── 9x16.js
/rain.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DannyDelott/9x16/HEAD/rain.mp4
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | #9x16.js
2 |
3 | Did you forget to shoot that video in portrait-mode?
4 |
5 | ###Setup:
6 |
7 | 1. Include jQuery on your page:
8 |
9 | ```html
10 |
11 | ```
12 |
13 | 2. Include 9x16.js underneath jQuery:
14 | ```html
15 |
16 | ```
17 |
18 | More info at: http://dannydelott.github.io/9x16
19 |
--------------------------------------------------------------------------------
/9x16-resize.js:
--------------------------------------------------------------------------------
1 | $(function(){
2 | var videos = Array.prototype.slice.call(document.getElementsByTagName('video'));
3 |
4 | /*
5 | * HELPER FUNCTIONS
6 | */
7 | var makeContainer = function(dimensions){
8 | return '';
9 | };
10 | var getDimensions = function($video){
11 | return [$video.innerWidth(), $video.innerHeight()];
12 | };
13 |
14 | /*
15 | * EVENT FUNCTION
16 | * Takes the video element and resize it to swap the dimensions.
17 | */
18 | var resize = function(event){
19 |
20 | // gets the video and its width
21 | var $vid = $(this);
22 | var dimensions = getDimensions($vid);
23 |
24 | // creates a letterbox container
25 | var container = makeContainer(dimensions);
26 |
27 | // calculates the vertical dimensions
28 | var verticalRatio = (dimensions[1] / dimensions[0]) / 1.3;
29 |
30 | // resizes the video
31 | $vid.css({
32 | 'transform': 'scaleX(' + verticalRatio + ')',
33 | '-webkit-transform': 'scaleX('+ verticalRatio + ')',
34 | '-moz-transform': 'scaleX(' + verticalRatio + ')',
35 | });
36 |
37 | // add video to container
38 | $vid.wrap(container);
39 |
40 | };
41 |
42 | /*
43 | * DEFAULT CODE
44 | * Loops through all the video elements and resizes them.
45 | */
46 | for(var i = 0; i < videos.length; i++){
47 | videos[i].addEventListener('loadedmetadata', resize);
48 | }
49 |
50 | });
51 |
--------------------------------------------------------------------------------
/9x16.js:
--------------------------------------------------------------------------------
1 | /* ************************************************************************************
2 | * Modify the z-index of the video controls to make them apear over the letterboxing. *
3 | * ************************************************************************************/
4 |
5 | document.write('');
6 |
7 | /* **************
8 | * BEGIN JQUERY *
9 | * **************/
10 |
11 | $(function(){
12 |
13 |
14 | /* ******************
15 | * HELPER FUNCTIONS *
16 | * ******************/
17 | var makeVideoContainer = function(dimensions){
18 | return '';
19 | };
20 | var makeOverlayContainer = function(dimensions){
21 | return '';
22 | };
23 | var makeLeftBar = function(dimensions){
24 | return '';
25 | };
26 | var makeRightBar = function(dimensions){
27 | return '';
28 | };
29 | var getDimensions = function($video){
30 | return [$video.innerWidth(), $video.innerHeight()];
31 | };
32 |
33 | /* ***************************************************************
34 | * EVENT FUNCTION *
35 | * Takes the video element and overlays letter boxing. *
36 | * ***************************************************************/
37 |
38 | var overlay = function(event){
39 |
40 | // gets the video and its dimensions
41 | var $vid = $(this);
42 | var dimensions = getDimensions($vid);
43 |
44 | // creates video container
45 | var container = makeVideoContainer(dimensions);
46 |
47 | // creates a letterbox overlay container
48 | var overlay = makeOverlayContainer(dimensions);
49 |
50 | // calculates the vertical dimensions
51 | var verticalRatio = (dimensions[1] / dimensions[0]);
52 |
53 | // add video to container
54 | $vid.wrap(overlay);
55 | $('.vjs-overlay').wrap(container);
56 |
57 | $('.vjs-overlay').prepend(makeLeftBar(dimensions));
58 | $('.vjs-overlay').prepend(makeRightBar(dimensions));
59 | };
60 |
61 | /* ********************************************************
62 | * DEFAULT CODE *
63 | * Loops through all the video elements and resizes them. *
64 | * ********************************************************/
65 |
66 | // Get the HTML5 video elements
67 | var videos = Array.prototype.slice.call(document.getElementsByTagName('video'));
68 |
69 | for(var i = 0; i < videos.length; i++){
70 | var $vid = $(videos[i]);
71 | if(!$vid.hasClass('no-please-no') &&
72 | !($vid).hasClass('not-me-please') &&
73 | !($vid).hasClass('oh-spare-me')){
74 | videos[i].addEventListener('loadedmetadata', overlay);
75 | }
76 | }
77 |
78 | });
79 |
--------------------------------------------------------------------------------