Contain Video

Hi,
Your page and the one you are taking as example are behaving the same; the difference is that here: https://www.icanpt.com all the content in the sections under the one where the video is visible have a white background.

Solution 1
So, if you want the same effect of the site you are looking as example you should work on the CSS to give each sections a white background.

Here is a demo page I set up where All the content below the first section is wrapped inside a DIV with a white background:

https://pupunzi.open-lab.com/test/bg_video_1.html

Solution 2
if you want a top section containing the video you should create a section, give it the height you want for the video and paste inside this code using the editor in text mode:

<div id="bgndVideo_section" data-property="{videoURL:'https://www.youtube.com/watch?v=JMhkAwIwyqI', opacity:.5, autoPlay:true, containment:'#bgVideo-section', startAt:1, stopAt:0, mute:true, vol:50, optimizeDisplay:true, showControls:false, printUrl:false, loop:true, addRaster:false, quality:'default', ratio:'16/9', realfullscreen:'false', gaTrack:'true', stopMovieOnBlur:'false'}" class="mbYTPMovie" ></div>

You should also disable the background video from the YTPlayer settings page.

Here is an example that shows how this solution works:

https://pupunzi.open-lab.com/test/bg_video_2.html

Hope this can help,
Matteo

Big, big thank you.

Your second solution is just what I’m after. I’ll try this now.

Hugely appreciated.

Hi there,

Disabled the background video from the YTPlayer settings page. But still can’t seem to recreate what you did in solution 2.

I’ve tried pasting the code in both the wordpress classic text editor and visual composer (inside both a text block and video element) but nothing shows up. Really frustrating as I can see your example!

Any guesses on what I’m doing wrong?

Really appreciate you taking the time to answer.

Thanks, man.

In the code I gave you there was a misspelled ID name. The below code should work:

<div id="bgndVideo_section" class="mbYTPMovie" style="width: 100%; height: 350px; background-color: #444;" data-property="{videoURL:'https://www.youtube.com/watch?v=JMhkAwIwyqI', opacity:.5, autoPlay:true, containment:'#bgndVideo_section', startAt:1, stopAt:0, mute:true, vol:50, optimizeDisplay:true, showControls:false, printUrl:false, loop:true, addRaster:false, quality:'default', ratio:'16/9', realfullscreen:'false', gaTrack:'true', stopMovieOnBlur:'false'}"></div>

Thank you – really appreciate your help. Solved.