edenhw
Members
-
Joined
-
Last visited
-
Hi Everyone I hope you're well. I've been trying to work out how to make a video player with a playlist for the project that I'm working on. Their doesn't seem to be many tutorials on this and was wondering if someone on here could help me out? I would like to make something similar to this https://cdn.athemes.com/wp-content/uploads/onplay-video-magazine-theme.jpg If anyone can help me out it would be much appreciated. Thanks!
- 1 reply
-
- video
- video player
- video playlist
- html5
-
Tagged with:
-
Hello Everyone, I hope you're well. I'm trying to make a full video background design with a section below it when you scroll downwards.Using a tutorial, I know how to make the full video background but whenever I try to add a section below it it either stays at the top of the page or margins etc start to glitch and it becomes a mess. I was wondering if anyone could help me out? HTML <!DOCTYPE html> <html> <head> <title>Video Background</title> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width"> <link rel="stylesheet" href="./css/main.css" type="text/css"> </head> <body> <div class="background-wrap"> <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="kids.mp4" type="video/mp4"> Video not supported </video> </div> <div class="content"> <h1>header</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate ante massa, eget ultricies nisi accumsan quis. Fusce volutpat turpis vel diam vulputate,</p> </div> </body> </html> ----------------------------------------------------------------- CSS * { margin: 0; padding: 0; } body { font-family: Calibri, sans-serif; } .background-wrap { position: fixed; z-index: -1000; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; } #video-bg-elem { position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; } .content { position: absolute; width: 100%; min-height: 100%; z-index: 1000; background-color: rgba(0,0,0,0.7); } .content h1 { text-align: center; font-size: 65px; text-transform: uppercase; font-weight: 300; color: #fff; padding-top: 15%; margin-bottom: 10px; } .content p { text-align: center; font-size: 20px; letter-spacing: 3px; color: #aaa; } ---------------------------------------------------------------------------- Thank you
-
- css3
- html
- video-background
- html5
-
Tagged with:
-
-
Yes I've already tried changing the color on the class content plus .content p and .content h2 ....Sorry I am quite new to this and don't know how to send a link...as far as i know i cant because i've been working in sublime text and i dont have a host. Is there an easy way to do it?
-
-
HTML ---------------------------------- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width-device-width"> <link rel="stylesheet" href="./css/main.css" type="text/css"> <title></title> </head> <body> <div class="intro"> <video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted"> <source src="kids.mp4" type="video/mp4"> Video not supported </video> </div> <div class="overlay"> <h1>The World Of Wu</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> <div class="content"> <h2>heading</h2> <p>Aenean at finibus metus. In hac habitasse platea dictumst. Donec accumsan ipsum vitae felis congue, et volutpat tellus volutpat. Suspendisse id egestas nibh. Duis iaculis felis tortor, vitae tristique tellus hendrerit a. Donec turpis massa, tincidunt sit amet iaculis vehicula, ornare non ligula. In hac habitasse platea dictumst. Phasellus tortor orci, pretium gravida molestie ac, consectetur eu nisl. Donec efficitur leo eget nunc semper eleifend. Quisque ultrices, ipsum nec faucibus dapibus, orci justo gravida libero, sed ultrices nunc felis sed tellus. Nulla mollis, sapien et ultrices efficitur, nisi ante porta orci, in ullamcorper purus tellus ut enim. Praesent leo velit, pulvinar feugiat dolor id, iaculis semper arcu. </p> </div> <Script type="text/javascript" src="jquery-2.1.1.min.js"></Script> <script type="text/javascript"> (function() { var windowH = $(window).height(), introEl = $('div.intro'), introHeadingH = introEl.find('h1').height(); introEl.css('padding', (windowH - introHeadingH)/2 + 'px 0'); $(document).on('scroll', function() { introEl.slideUp(1000, function() { $(document).off('scroll'); }); }); })(); </script> </body> </html> CSS ---------------------------------- * { margin:0; padding:0; } body { font-family:calibri, sans-serif; } .intro { background-position:50% 50%; background-size:cover; } .content { height:2000px; padding-top:100px; background-color:#aaa; } .content h2, .content p { width:60%; margin:0 auto; } .intro { z-index: -1000; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0; } #video-bg-elem { position: absolute; top: 0; left: 0; min-height: 100%; min-width: 100%; } /* other ting */ .overlay { position: absolute; width: 100%; min-height: 100%; z-index: 1000; background-color: rgba(0,0,0,0.7); } .overlay h1 { text-align: center; font-size: 65px; text-transform: uppercase; font-weight: 300; color: #fff; padding-top: 15%; margin-bottom: 10px; } .overlay p { text-align: center; font-size: 20px; letter-spacing: 3px; color: #aaa; } ----------------------------------------- This is my code. I'm having trouble making the text visible on the "<div class="content">" element and I was wondering if anyone could help me out here?
