How to darken a background video and how to insert a .png (a logo) on top of it?

Question

How to darken a background video and how to insert a .png (a logo) on top of it?

Navigation

#1 by (0 votes)

0

I've already researched, I've seen about 10 tutorials and I could not figure out how to position my logo on top of that video.

$('#my-video').backgroundVideo({
  $videoWrap: $('#video-wrap'),
  $outerWrap: $(window),
  $window: $(window),
  minimumVideoWidth: 1000,
  preventContext<a href="http://www.jqueryscript.net/menu/">Menu</a>: false,
  parallax: true,
  parallaxOptions: {
    effect: 1.5
  },
  pauseVideoOnViewLoss: false
});

video{
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 10;
}

.logoCapa{
    width: 100%;
    }

<div class="container-responsive"  id="HOME">
		  	<div id="video-wrap" class="video-wrap">
				<video preload="metadata" autoplay loop id="my-video" muted="muted">
				    <source src="img/video.mp4" type="video/mp4">
				    <source src="img/video.ogg" type="video/ogg">
				</video>
			</div>
			<div class="col-md-8 col-md-offset-2 col-md-offset-2">	
				<img src="img/logocapa.png" class="hvr-forward logoCapa" alt="rafael dias webdeveloper">
			</div>	
	    </div>

bootstrap-3 video html5-video

asked by anonymous 07.02.2017 / 13:49

1 answer

SQLSTATE [HY000]: General error: 2053 when I call a Stored Procedure? How to make the program write all information?

score 0 · Answer 1

You can handle this simply by using CSS.

A simple example would be this:

.logoCapa{
    width: 200px;
    height: 200px;
    background: red;
    position: absolute;
    top: 20px;
    z-index: 10;
  }

I just added position: absolute; and use top: 20px; as an example to change position.

basic backgroundVideo example would look like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Background Parallax Video</title>
  <link href="../css/normalize.css" rel="stylesheet" />
  <link href="../css/styles.css" rel="stylesheet" />
  <style>
    .logoCapa {
      width: 200px;
      height: 200px;
      background: red;
      position: absolute;
      top: 20px;
      z-index: 10;
    }
  </style>
</head>

<body>
  <main style="height: 1500px">
    <video class="bv-video"></video>
  </main>
  <script src="../dist/backgroundVideo.js"></script>
  <div class="logoCapa">Minha Logo</div>
  <script>
    const backgroundVideo = new BackgroundVideo('.bv-video', {
      src: [
        '../videos/sample.mp4',
        '../videos/sample.webm'
      ],
      onReady: function() {
        // Use onReady() to prevent flickers or force loading state
        const vidParent = document.querySelector('.${this.bvVideoWrapClass}');
        vidParent.classList.add('bv-video-wrap--ready');
      }
    });
  </script>
</body>

</html>

NOTE: The snippet is not functional because I did not find the BackgroundVideo Script online.