video background behind an image

[karawinter]

In the slider container I want to use a video loop background and on the video I want to use a transparent png. Is it possible, if yes what would be the html look like?

If not I will use a single video loop background but anyway I need help for the html. I’d be pleased if you send me a sample code.
Thanks.

---

[Support]

Hello, here’s the sample code to set a HTML5 video loop on Revolution Slider:

<div class="slider-container">
	<div class="slider" id="revolutionSlider" data-plugin-revolution-slider data-plugin-options='{"startheight": 500, "dottedOverlay": "twoxtwo"}'>
		<ul>
			<li data-transition="slidehorizontal" data-slotamount="1" data-masterspeed="1000" data-thumb="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_woman_cover3-320x200.jpg"  data-fstransition="fade" data-fsmasterspeed="1000" data-fsslotamount="7" data-saveperformance="off"  data-title="Free on the Beach">
				<!-- MAIN IMAGE -->
				<img src="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_woman_cover3.jpg"  alt="video_woman_cover3"  data-bgposition="center center" data-bgfit="cover" data-bgrepeat="no-repeat">
				<!-- LAYERS -->

				<!-- LAYER NR. 1 -->
				<div class="tp-caption tp-fade fadeout fullscreenvideo"
					data-x="0"
					data-y="0"
					data-speed="1000"
					data-start="1100"
					data-easing="Power4.easeOut"
					data-elementdelay="0.01"
					data-endelementdelay="0.1"
					data-endspeed="1500"
					data-endeasing="Power4.easeIn"
					data-autoplay="true"
					data-autoplayonlyfirsttime="false"
					data-nextslideatend="true"
					data-volume="mute" data-forceCover="1" data-aspectratio="16:9" data-forcerewind="on" style="z-index: 2;">
					<video class="" preload="none" width="100%" height="100%" poster='http://themepunch.com/revolution/wp-content/uploads/2014/05/video_woman_cover2.jpg'> 
						<source src='http://themepunch.com/revolution/wp-content/uploads/2014/05/woman_sun.mp4' type='video/mp4' />
						<source src='http://themepunch.com/revolution/wp-content/uploads/2014/05/woman_sun.webm' type='video/webm' />
					</video>

				</div>

			</li>
		</ul>
	</div>
</div>

You can find more samples in the documentation included in the package.

Let me know if you need further assistance.

Kind Regards, Jonas

---

[Support]

And for the overlay image you can make a custom:

(css/custom.css)

.tp-dottedoverlay.twoxtwo {
    background: url("path-to-image.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}

---

[Author]

Posts