Niq's OA Resources
OA Review Widget
Resources
Basic coupons
Lunch Menus
Memes
Code stuff
video background
Interactive effects
Fade in effect
A new kind of Parallax
New Parallax integration
animate css
CSS Media Query
Dynamic column sorting
Number Replacement Script
Lightbox
Galleries
Easy Square Gallery
Hexagon Gallery
Horizontal Masonry Gallery
Vertical Masonry Gallery
Hover Overlay
Hexagons
Mznaztymaps
OA Content Replacement
OA carousel
Designer Resources
Design Process
Design Processes
Start-up Process
Redesign Process
Tasks
Tag and Links
Image practices
Font Awesome
Bootstrap Menu
OA Accordion
video background
Heading
Lorem ipsum...
<style> #bg_video { position: fixed; left: 0; bottom: 0; min-width: 100%; min-height: 100%; z-index: -5; background-size: cover; background-position: top left; background-image: url('/wahelper/GetImage?id=337813'); } </style> <video autoplay muted loop id="bg_video"></video> <script > $(window).load(function(){ if($(window).width() >= 999){ $("#bg_video").html('<source src="https://ak.picdn.net/shutterstock/videos/1035005990/preview/stock-footage-abstract-dust-particles-background-bokeh-particles-background-loop.webm" type="video/mp4">' ); } }); </script>
Pause Button:
<style> #bg_video--pause { display: table; font-size: 18px; padding: 10px; border: none; background: #000; color: #fff; cursor: pointer; } #bg_video--pause:hover { background: #ddd; color: black; } </style> <button class="hide-for-small" id="bg_video--pause" onclick="myFunction()" style="position: sticky; top: 0; right: 0;"><i class="fas fa-pause"></i></button> <script > var bg_video = document.getElementById("bg_video"); var btn = document.getElementById("bg_video--pause"); function myFunction() { if (bg_video.paused) { bg_video.play(); btn.innerHTML = "Pause"; } else { bg_video.pause(); btn.innerHTML = "Play"; } } </script>
Powered by
Online Access
All Rights Reserved © 2001-2024
Privacy Policy