Skip to content

Instantly share code, notes, and snippets.

@jakeNiemiec jakeNiemiec/tes.html
Created Jun 10, 2016

Embed
What would you like to do?
<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
You can’t perform that action at this time.