├── .gitignore ├── images ├── main.jpg └── ex.svg ├── README.md ├── index.html ├── css └── application.css └── js └── application.js /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /images/main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caseyhen/background-video/HEAD/images/main.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | background-video 2 | ================ 3 | 4 | Example of how to use Wistia for your background video 5 | -------------------------------------------------------------------------------- /images/ex.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Background Video Sample 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /css/application.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | .hello .overlayVideo { 6 | position: absolute; 7 | left: -3000px; 8 | top: 0px; 9 | z-index: 6; 10 | visibility: hidden; 11 | } 12 | .hello .backgroundVideo { 13 | z-index: 4; 14 | visibility: hidden; 15 | } 16 | .hello #video_container { 17 | width: 100%; 18 | height: 100%; 19 | overflow: hidden; 20 | position: relative; 21 | z-index: 1; 22 | opacity: 1; 23 | } 24 | .hello #video_container #text { 25 | position: absolute; 26 | z-index: 6; 27 | text-align: center; 28 | opacity: 0; 29 | } 30 | .hello #video_container #text #actions { 31 | height: 95px; 32 | } 33 | .hello #video_container #text #playbutton { 34 | z-index: 3; 35 | margin: 0 auto; 36 | margin-top: 60px; 37 | height: 95px; 38 | display: block; 39 | } 40 | .hello #video_container #text #playbutton .rectangle { 41 | background-color: #3ea9f5; 42 | width: 149px; 43 | height: 95px; 44 | opacity: 0.8; 45 | margin: 0 auto; 46 | } 47 | .hello #video_container #text #playbutton .rectangle:hover { 48 | background-color: #52bdff; 49 | cursor: pointer; 50 | } 51 | .hello #video_container #text #playbutton .triangle { 52 | width: 0; 53 | height: 0; 54 | border-style: solid; 55 | border-width: 22px 0 22px 32px; 56 | border-color: transparent transparent transparent white; 57 | margin: 0 auto; 58 | position: relative; 59 | bottom: 70px; 60 | pointer-events: none; 61 | } 62 | .hello #cover_all { 63 | position: absolute; 64 | top: 0; 65 | left: 0; 66 | z-index: 5; 67 | height: 100%; 68 | width: 100%; 69 | } 70 | .hello #ex { 71 | position: absolute; 72 | right: -3000px; 73 | top: 25px; 74 | z-index: 7; 75 | cursor: pointer; 76 | opacity: 0.8; 77 | } 78 | .hello #ex:hover { 79 | opacity: 1; 80 | } 81 | .hello #main-image { 82 | position: absolute; 83 | top: 0; 84 | left: 0; 85 | z-index: 3; 86 | background-image: url(../images/main.jpg); 87 | background-repeat: no-repeat; 88 | background-position: 50% 50%; 89 | background-size: cover; 90 | } -------------------------------------------------------------------------------- /js/application.js: -------------------------------------------------------------------------------- 1 | var fullScreenVideo = fullScreenVideo || {}; 2 | 3 | fullScreenVideo = { 4 | name: 'fullScreenVideo', 5 | /** 6 | * CHANGE THESE VARIABLES TO YOUR VIDEOS 7 | * overlayVideo: The video in the overlay 8 | * overlayVideoDiv: The jQuery selector of the div containing the overlay video 9 | * backgroundvideo: The video in the backgorund 10 | * backgroundideoDiv: The jQuery selector of the div containing the background video 11 | */ 12 | overlayVideo: 'fji9juvptr', 13 | overlayVideoDiv: '#wistia_fji9juvptr', 14 | backgroundvideo: 'z1ggfo8f86', 15 | backgroundideoDiv: '#wistia_z1ggfo8f86', 16 | 17 | /** 18 | * This will call Wistia and embed the two videos 19 | * @param None 20 | */ 21 | embedVideo: function() 22 | { 23 | var videoOptions = {}; 24 | 25 | // Add the crop fill plugin to the videoOptions 26 | Wistia.obj.merge(videoOptions, { 27 | plugin: { 28 | cropFill: { 29 | src: "//fast.wistia.com/labs/crop-fill/plugin.js" 30 | } 31 | } 32 | }); 33 | 34 | // Video in the background 35 | wistiaEmbed = Wistia.embed(fullScreenVideo.backgroundvideo, videoOptions); 36 | // Video to be shown in the overlay 37 | overlayEmbed = Wistia.embed(fullScreenVideo.overlayVideo, videoOptions); 38 | 39 | /** 40 | * We load the thumbnail in the background while we wait 41 | * for the video to load and play. Once loaded, we pause, reset to 42 | * frame zero, show the video then play it. 43 | */ 44 | wistiaEmbed.bind("play", function(){ 45 | wistiaEmbed.pause(); 46 | wistiaEmbed.time(0); 47 | $(fullScreenVideo.backgroundideoDiv).css('visibility', 'visible'); 48 | wistiaEmbed.play(); 49 | return this.unbind; 50 | }); 51 | }, 52 | /** 53 | * Plays the video set as overlayEmbed 54 | * @param None 55 | */ 56 | playVideo: function() 57 | { 58 | $(fullScreenVideo.overlayVideoDiv).css("left", 0).css("visibility", "visible"); 59 | overlayEmbed.plugin.cropFill.resize(); 60 | $("#text").css({ opacity: 0 }); 61 | $("#ex").css("right", 24); 62 | overlayEmbed.play(); 63 | }, 64 | /** 65 | * Hide the overlay video and pause it. Also reshow 66 | * the text on the page. 67 | * @param None 68 | */ 69 | exitVideo: function() 70 | { 71 | $(fullScreenVideo.overlayVideoDiv).css("left", -3000).css("visibility", "hidden"); 72 | $("#ex").css("right", -3000); 73 | $("#text").css({ opacity: 1 }); 74 | overlayEmbed.pause(); 75 | overlayEmbed._keyBindingsActive = false; 76 | }, 77 | /** 78 | * Fix the size of the images and text on page 79 | * @param None 80 | */ 81 | fixTextPosition: function() 82 | { 83 | var width = $( window ).width(); 84 | var height = $( window ).height(); 85 | textWidth = $("#text").width(); 86 | textHeight = $("#text").height(); 87 | $("#video_container").css("width", width).css("height", height); 88 | $("#main-image").css("width", width).css("height", height); 89 | $("#text").css("left", (width/2) - (textWidth/2)).css("top", (height/2) - (textHeight/2)); 90 | } 91 | 92 | } 93 | 94 | /** 95 | * When the doc is ready, fix the video and images sizes 96 | * then display the text on the page. 97 | */ 98 | $(document).ready(function() { 99 | fullScreenVideo.fixTextPosition(); 100 | $("#text").delay(200).animate({ opacity: 1 }, 650); 101 | }); 102 | 103 | // If the widow is resized, resize the videos 104 | $(window).resize(fullScreenVideo.fixTextPosition); 105 | 106 | // When the play button is clicked, call the play function 107 | $(".rectangle").click(fullScreenVideo.playVideo); 108 | 109 | // When the "X" is clicked, exit the video 110 | $("#ex").click(fullScreenVideo.exitVideo); 111 | 112 | // Start loading the video 113 | fullScreenVideo.embedVideo(); --------------------------------------------------------------------------------