html - Applying attributes to a video -
html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .wrap { height: 100%; width: 100%; background-size: cover; position: relative; overflow: hidden; background: #000; color: #000; text-align: center; font-family: arial, san-serif; } header { background: #3e474f; box-shadow: 0 .5em 1em #111; position: absolute; top: 0; left: 0; z-index: 900; width: 100%; } header label { color: #788188; cursor: pointer; display: inline-block; line-height: 4.25em; font-size: .677em; font-weight: bold; padding: 0 1em; } header label:hover { background: #2e353b; } h1 { font-size: 300%; } .slide { height: 100%; width: 100%; position: absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-color: #120103; background-position: 50% 50%; background-size: cover; } .slide-one { background-image: url('jupiter.jpg'); } .slide-two { background-image: url('neptune.jpg'); } .slide-three { background-image: url('mars.jpg'); } .slide-four { background-image: url('moon.jpg'); } [id^="slide"]:checked+.slide { left: 0; z-index: 100; } video { z-index: 10000; }<!doctype html> <html lang="en"> <head> <title>pure css horizontal slider</title> <meta name="viewport" content="width=device-width, initial-scale=" 1 "/> <link rel="stylesheet " type="text/css " href="main1.css " /> </head> <body> <div class="wrap "> <header> <label for="slide-1-trigger ">slide one</label> <label for="slide-2-trigger ">slide two</label> <label for="slide-3-trigger ">slide three</label> <label for="slide-4-trigger ">slide four</label> </header> <input id="slide-1-trigger " type="radio " name="slides " checked/> <section class="slide slide-one "> <h1>headline one</h1> <video width="250 " height="170 " controls> <source src="jupitergif.webm " type="video/webm "> </source> </video> </section> <input id="slide-2-trigger " type="radio " name="slides " /> <section class="slide slide-two "> <h1>headline two</h1> </section> <input id="slide-3-trigger " type="radio " name="slides " /> <section class="slide slide-three "> <h1>headline three</h1> </section> <input id="slide-4-trigger " type="radio " name="slides " /> <section class="slide slide-four "> <h1>headline four</h1> </section> </div> </body> </html>i having trouble styling video in bottom right corner of page. also, how can make video autoplay on loop? also, how can rid of play/maximize icons on video? video in section class slide slide-one. appreciated.
add autoplay , loop attributes <video> , remove controls. <source> void element doesn't have end tag </source>
<video width="250" height="170" autoplay loop>
for placing video in bottom right corner use:
video { z-index: 10000; position:fixed; bottom:0; right:0; }
btw keep format consistent of right quotes have space before them, remove spaces.
snippet
html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .wrap { height: 100%; width: 100%; background-size: cover; position: relative; overflow: hidden; background: #000; color: #000; text-align: center; font-family: arial, san-serif; } header { background: #3e474f; box-shadow: 0 .5em 1em #111; position: absolute; top: 0; left: 0; z-index: 900; width: 100%; } header label { color: #788188; cursor: pointer; display: inline-block; line-height: 4.25em; font-size: .677em; font-weight: bold; padding: 0 1em; } header label:hover { background: #2e353b; } h1 { font-size: 300%; } .slide { height: 100%; width: 100%; position: absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-color: #120103; background-position: 50% 50%; background-size: cover; } .slide-one { background-image: url('https://pbs.twimg.com/profile_images/628266121313947648/zk_c8qnd.jpg'); } .slide-two { background-image: url('https://dperkins.org/gal/2014/thumb/2014-10-06.18.neptune.jpg'); } .slide-three { background-image: url('https://at-cdn-s01.audiotool.com/2011/10/04/documents/fhcjd1ibhjeicesy8ubgbopvfnr/0/cover256x256-dd1bb728ff564ec69ededd71b2ba4ada.jpg'); } .slide-four { background-image: url('https://is5-ssl.mzstatic.com/image/thumb/purple71/v4/82/42/9a/82429a1b-a489-d421-5ec2-cb38613b54f4/source/256x256bb.jpg'); } [id^="slide"]:checked+.slide { left: 0; z-index: 100; } video { z-index: 10000; position:fixed; bottom:0; right:0; }<!doctype html> <html lang="en"> <head> <title>pure css horizontal slider</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div class="wrap"> <header> <label for="slide-1-trigger">slide one</label> <label for="slide-2-trigger">slide two</label> <label for="slide-3-trigger">slide three</label> <label for="slide-4-trigger">slide four</label> </header> <input id="slide-1-trigger" type="radio" name="slides" checked/> <section class="slide slide-one"> <h1>headline one</h1> <video width="250" height="170" autoplay loop> <source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/webm"> </video> </section> <input id="slide-2-trigger" type="radio" name="slides"> <section class="slide slide-two"> <h1>headline two</h1> </section> <input id="slide-3-trigger" type="radio" name="slides"> <section class="slide slide-three"> <h1>headline three</h1> </section> <input id="slide-4-trigger" type="radio" name="slides"> <section class="slide slide-four"> <h1>headline four</h1> </section> </div> </body> </html>
Comments
Post a Comment