Created
June 10, 2016 01:27
-
-
Save jakeNiemiec/cf61279aaaececec4edf87735a826459 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html><head> <meta name="description" content="Simplest possible examples of HTML, CSS and JavaScript."/> <meta name="author" content="//samdutton.com"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> <meta itemprop="name" content="simpl.info: simplest possible examples of HTML, CSS and JavaScript"> <meta itemprop="image" content="icon_192x192.png"> <meta name="mobile-web-app-capable" content="yes"> <meta id="theme-color" name="theme-color" content="#fff"> <base target="_blank"> <title>The video element: multiple videos</title><style>body{background-image: url("http://i.imgur.com/xlTahEK.jpg"); background-repeat: repeat-xy;}#animate{animation: move 3s ease infinite;}#random video{transform: rotate(2.75deg); animation: fadeInFromNone 10s ease infinite;}#random video:nth-child(1n){transform: none; animation: move 7s ease infinite;}#random video:nth-child(2n){transform: none; animation: move 10s ease infinite;}#random video:nth-child(3n){transform: rotate(50.5deg);animation: move 20s ease infinite;}#random video:nth-child(4n){transform: rotate(-2.5deg);animation: move 20s ease infinite;}#random video:nth-child(5n){transform: scale(1.1); animation: move 10s ease infinite;}#random video:nth-child(2n){transform: scale(1.1); animation: move 30s ease infinite;}@keyframes move{30%{transform: translate(-100px, -100px);transform: rotate(10deg); opacity: 1;}40%{transform: translate(500px, 100px); opacity: 0;}50%{transform: translate(500px, 100px);transform: rotate(-20.5deg); opacity: 1;}60%{transform: translate(500px, 100px); opacity: 0;}70%{transform: translate(300px, 200px); opacity: 1;}90%{transform: translate(100px, -500px); opacity: 1;}}</style> </head><body>a <h1 style="color:lightgrey; background-color:red">Chrome will only load *6* videos. Safari will load all 12. These are all html5 video elements, you can click on the controls just like a normal video.</h2><div id="random"> 1<video width="500" height="400" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/137/contribution/264/av/137_264.mp4" autoplay controls></video> 2<video width="500" height="400" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/138/contribution/265/av/138_265.mp4" autoplay controls></video> 3<video width="500" height="400" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/139/contribution/266/av/139_266.mp4" autoplay controls></video> 4<video width="800" height="600" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/140/contribution/267/av/140_267.mp4" autoplay controls></video> 5<video width="500" height="400" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/141/contribution/268/av/141_268.mp4" autoplay controls></video> 6<video width="1200" height="900" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/142/contribution/269/av/142_269.mp4" autoplay controls></video> 7<video width="800" height="600" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/143/contribution/270/av/143_270.mp4" autoplay controls></video> 8<video width="500" height="400" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/144/contribution/271/av/144_271.mp4" autoplay controls></video> 9<video width="500" height="400" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/201435/seed/1171/av/201435_1171.mp4" autoplay controls></video> 10<video width="500" height="400" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/145/contribution/272/av/145_272.mp4" autoplay controls></video> 12<video width="500" height="400" src="https://d3nq3sthbgpt5v.cloudfront.net/content/artist/201472/contribution/427/av/201472_427.mp4" autoplay controls></video> </div></body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment