VIDEO OVERLAY

kviktar

Hi. Can I use the example below to post a video on my ja coach template ?
http://www.shape5.com/demo/light_church/index.php/features-mainmenu-47/continued-vertex-features/typography
This example is taken from a shape5 studio, that is your partner.
<div class="video_overlay_wrap" style="max-height:700px;min-height:300px;width:1500px;background: url(/demo/light_church/images/video_preload.jpg);"> <video muted autoplay="autoplay" loop="loop" src="/demo/light_church/images/video.mp4"></video> <div class="video_overlay_text_wrap"> <div class="video_overlay_text_wrap_inner"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi efficitur scelerisque ligula, sit amet fermentum metus. <div style="clear:both;height:0px;"></div> </div> </div> </div>

If this is not possible, please tell me how I can do something like this:

Looped (infinite) video of small volume.
On top of the video layer my arbitrary text.

ja-developer

kviktar Hi,
It appears that your account does not have an active membership on our site. However JA Coach is a paid template and requires an active membership to access.

If you have purchased a JoomlArt membership using a different account, please log in to the correct paid account to request support. Our team will be happy to assist you further.

If you have not purchased a JoomlArt membership yet, please do so to gain proper access to the downloads and our support. You can purchase the membership at this page.

vitalik20

ja-developer
Yeah, I'm sorry. I'm logged in from a paid account with a subscription.

saguaros

You can try with that HTML mockup and add this custom css rule:

.video_overlay_wrap {
  position: relative;
  color: #fff;
  height: 500px;
}

.video_overlay_wrap video {
  height: 100%;
  width: 100%;
}

.video_overlay_text_wrap {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  background: rgba(49,49,49,0.54);
}

.video_overlay_text_wrap_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 600px;
  padding: 16px;
  width: 100%;
  transform: translate(-50%,-50%);
  text-align: center;
}

vitalik20

saguaros Thanks for the reply. Could you please tell me exactly which file I should make these changes to?

saguaros

With above custom css rules, you can put into file:

/templates/ja_coach/css/custom.css (create this file if it doesn't exist)