Canvas Support

shape dividers html5 video

2 replies·opened Jan 18, 2021
S
silkysackJan 18, 2021

hello, im trying to use the html5 video section from sections.html and i want to add a shape divider to it. Here is the code Im using, but the shape dividers wont show, please help. Thanks!

<div class="section dark m-0 border-0 min-vh-60">
	<div class="shape-divider" data-shape="valley-3" data-height="150"></div>
		<div class="container-fluid vertical-middle center clearfix">
			<i class="i-plain i-large icon-line-video mx-auto" data-animate="fadeInDown"></i>
				<div class="emphasis-title m-0" data-animate="fadeInUp">
					<h2 style="font-size: 56px;">Section with HTML5 Video</h2>
				</div>
		</div>
		<div class="video-wrap">
			<video poster="images/videos/explore-poster.jpg" preload="auto" loop autoplay muted>
				<source src='images/videos/explore.webm' type='video/webm' />
				<source src='images/videos/explore.mp4' type='video/mp4' />
			</video>
			<div class="video-overlay"></div>
		</div>
	<div class="shape-divider" data-shape="valley-3" data-position="bottom" data-height="150"></div>
</div>
S
silkysackJan 18, 2021

nevermind, found my problem, i needed z-index Thanks!

This is my final working code...

<div class="section" style="height: 550px;">
	<div class="shape-divider" data-shape="valley" data-flip="true" data-flip-vertical="true" data-fill="#FFF" data-height="150" style="z-index: 1000;"></div>
		<div class="container-fluid vertical-middle center clearfix dark">
			<i class="i-plain i-large icon-line-video mx-auto" data-animate="fadeInDown"></i>
			<div class="emphasis-title m-0" data-animate="fadeInUp">
				<h2 style="font-size: 56px;">Section with HTML5 Video</h2>
			</div>
		</div>
		<div class="video-wrap">
			<video poster="images/videos/explore-poster.jpg" preload="auto" loop playsinline autoplay muted>
				<source src='images/videos/explore.webm' type='video/webm' />
				<source src='images/videos/explore.mp4' type='video/mp4' />
			</video>
			<div class="video-overlay"></div>
		</div>
	<div class="shape-divider" data-shape="valley" data-position="bottom" data-flip="true" data-flip-vertical="true" data-fill="#FFF" data-height="150" style="z-index: 1000;"></div>
</div>
S
SemiColonWebSTAFFJan 18, 2021

Hello,

Glad that this was resolved. Consider using data-front="true" instead, as this brings the Shape Divider on top of the Content:

<div class="shape-divider" data-shape="valley" data-flip="true" data-flip-vertical="true" data-fill="#FFF" data-height="150" data-front="true"></div>

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard