Youtube Video Background Not Working Try doing it This way

[@System22]

Check out our playlist page for more videos on this: kzbin.infoplaylists Don't forget to drop any questions below, I will do my best to answer or make a video demo for you! Sub: kzbin.info/door/Yeyetu9B2QYrHAjJ5umN1Q

[@donallong2369]

Hi Jamie, Thanks for another great video and I know that adding a KZbin video as a background is an ongoing frustration for lots of Divi users. However I don't think that your approach of using a full width section with no padding along with negative margin works very well as it can get messed up when you've got a smaller screen size, such as a 13 inch laptop or you need to have left aligned content within the row. When the content of the row is greater height than the negative margin that you've applied, the content will spill over onto the next section which does not look great. Finally it doesn't allow for a more complex section layout that contains more than 1 row and multiple modules. For instance, how would this work if you were putting the video background on the services section that you imported from your library? I've struggled with this before and I still end up having a code module with the KZbin embed link that is positioned absolutely at top:0 left:0, along with 100% height and width, and overflow hidden. Then the z-index can be set to ensure that all rows and modules are at the top of the stacking order to put them in front of the video. Having to do any of this is annoying when Divi sections have an "insert from URL" option in the video background settings that will even play a preview of the video when you add a KZbin link...

[@System22]

I have checked it in the browser using responsive mode, going from huge to tiny and it seems to work really well! Have you tried it? You can use a row and put anything in it and use neg margin on the row if you need to!

[@donallong2369]

@@System22 Hi Jamie, I built a page following along with you, to make sure that I was getting it right and then when I changed to having more than one column I found that the row must be moved up using negative margin, which changes the setting requirements again. Also, if you put a background colour on the section below the header, it will begin to show a gap at the top when the screen sizes change. The other thing that I noticed using this approach is that the video title, watch later and share links appear at the top of the video whenever a user hovers over the section and this can be disabled using css (pointer-event:none;) but it will always appear when the pages loads. Finally, the video will not loop, so when it gets to the end the usual "play next" listing will appear on the screen. I tried adding "&loop=1" to the url parameters but it doesn't work. Here's the page that I created on a 22 inch screen and the white space starts to show when it's viewed on a 15 inch or 13 inch screen; sandbox.wpcdev.ie/sample-page/

[@MoeiteloosLekkerLeven]

Thanks for this video. I followed your instruction and everything is allright, but it's not on autoplay (although I included &autoplay=1) Any idea what might go wrong?

[@dedisupardi2815]

Cool🎉

[@System22]

Thanks!

[@learnwithshorif]

Can you create a toggle? example: Cpanel Files, Email, when I click the arrow button it automatically expands. Please try this. It's my request.