Asked 100 times: Video Background on element

Actually the WordPress version of this component allows background video only for the BODY or you can use it as custom player. If you want you can check the jQuery plug-in documentation to implement it as background of an element of the page.

Bye,
M

I am completely new to jQuery.

Quick question: Is it just as any other plug-in, that I install it to WordPress and enter my settings as normal?

Btw, I found this old thread 2 years ago
https://www.ads-software.com/support/topic/plugin-mbytplayer-for-background-videos-video-as-background-of-element-not-body?replies=4
and you answered it was possible back then, but not now?

The one you download from the WordPress plugin repository is like any other WP plugin; not the jQuery standalone one.

I’m not saying that this is impossible, I’m saying you should have some code skills to do that…

Bye,
M

I’ll try to share my explaination.
Basically I needed a video background on a div and then needed to add some text on top of the video.

It looked something like this:

<!-- Start Video Background on Element - Make sure the div id  is the same as the containment id in the data-proerty below-->

<div id="ml-background-video-wrapper" class="mbYTPMovie" data-property="{videoURL:'https://www.youtube.com/watch?v=diZQeRX_u2I', containment:'#ml-background-video-wrapper', showControls:false, autoPlay:true, loop:true, mute:true, startAt:0, opacity:1, addRaster:false, optimizeDisplay: true, realfullscreen: true, quality:'default'}">

<!-- Text overlaid on top of the video-->

<div class="ml-background-video-text">
<h1>Text!</h1>
<h2>Longer Text.</h2>
</div>

<!-- End Text overlaid on top of the video-->

</div>

<!-- End Start Video Background on Element -->

Then the CSS and make sure to include a background image for mobile on the containing div:

#ml-background-video-wrapper {
margin: 2.3em auto 0.0em auto !important;
background-color: transparent !important;
  overflow: visible !important;
      z-index: 0;
    background-size: 100% 100%;
    top: 0px;
    left: 0px; /* fixed to left. Replace it by right if you want.*/
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: 500px;
background: url(https://yoururl.com) no-repeat;
}

.ml-background-video-text h1 {
	font-size: 6.0em !important;
  font-size: 7.5vh !important;
  font-weight: 400;
  text-align: center;
  text-shadow: 0px 0px 3px #fff;
  width: 72%;

}

.ml-background-video-text h2 {
	padding-top: 0% !important;
	font-size: 3.0em !important;
  font-size: 3.5vh !important;
  font-weight: 600;
  background: #333333;
  text-align: center;
  text-shadow: 0px 0px 3px #fff;
}

Hopefully that helps ??