background pattern image on videos having issues while scrolling

background pattern image on videos having issues while scrolling

My code
<div id="HomePage"></div>
#HomePage {
background:url('../../images/pattern.png');
position: fixed;
width: 100%;
min-height: 100%;
}
I used video as a background and while scrolling, it creates unwanted
horizontal lines across the screen as shown in the screens: