How to add background video stop button


Tags: jquery,html,css,html5

Problem :

I googled whole day but no result then I rerembered this website.

Can anyone tell me how to add stop button to background video?

html code:

<div id="background" class="background">
            <video id="video_background" src="video.mp4" autoplay>
        <div class="overlay"></div>
    </div><!--/ background-->

css code:

#video_background {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: -1000;
}

and website link: http://2gdmedia.com/dark



Solution :

With jQuery - button or element that will stop the video has the attribute class='stopElementClass'

$(function(){
    $('.stopElementClass').on('click', function(){
        $('#video_background').get(0).pause();
    }
});

Check out https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement


    CSS Howto..

    How to vertically align a form and image

    How to make a site have a built in user-friendly editor?

    Chrome Developer Tools: How to find out what is overriding a CSS rule?

    jQuery & CSS - How to stop a relative element from floating left and right (when you're scrolling)?

    How to do a workaround in css that removes spacing in footer of navigator7 vaadin addon

    how to achieve this this horizontal line from css or bootstrap

    CSS: How to position a div in the center with dynamic width

    Textmate newbie question: how to indent CSS

    Progress Bar in jquery showing reverse animation

    How to keep a floating div centered on window resize (jQuery/CSS)

    how to make the navbar fixed to top

    CSS selector: How to select element sibling AND element itself?

    how to make this fit in same line in css

    How to make AngularJS Materials drop down menues more visable?

    Using Susy, how can I make a div expand to height of tallest sibling?

    How are CSS frameworks used?

    How to accurately position divs with css

    How to make submenus drop down below parent menu, instead of flying out?

    How to disable Bootstrap 3 collapse nav menu css

    How to make input text bigger in bootstrap css framework?

    How to build the whole web site from css design [closed]

    How to align the inside box to center of the table

    CSS Border-Radius Shows Parent's Style

    How to read and show accelerometer data (server side) using JavaScript and Node.js

    How to document a webpage HTML and CSS using comments [closed]

    How to overlay images with css (cross-browser)

    How to print outlines and background colors from css, when using JQuery printElement, and IE8?

    How to add styles based on whether top element is empty

    How to achive this design CSS

    How to inherit css from grandparent tag? [duplicate]