Joomla Templates Club 406,261 posts

[upweb Friend upwebJoin date: November 2015Posts: 142Downloads:6Uploads:5 Thanks: 2]

#851671

Is it possible to load videos as on the masthead module? It seems that this is blocked, differently from the masthead module. We would like to have a video on the homepage, rather than an image. How can we achieve that?

thank you

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#852217

Hi @upweb,

Please edit the thread (first post), choose Require Help From Staff + Mod/Admin? then provide your site url with temporary admin account there so I can check this matter for you.

[upweb Friend upwebJoin date: November 2015Posts: 142Downloads:6Uploads:5 Thanks: 2]

#852879

Done. Thank you.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#862302

Hi @upweb,

Thanks for the info.

1. Please open file templates/ja_mono/acm/cta/tmpl/style-1.php and look for this line :

   <div class="acm-cta <?php echo $ctaStyle; ?> <?php if( trim($ctaHeading) ) echo ' show-intro'; ?>" style="background-image: url(<?php echo trim($ctaBg); ?>);">

   and change as below :

   <div class="acm-cta <?php echo $ctaStyle; ?> <?php if( trim($ctaHeading) ) echo ' show-intro'; ?>">
   <div class="cta-video">
   <video loop muted autoplay class="fullscreen-bg__video">
       <source src="<?php echo trim($ctaBg); ?>" type="video/mp4">
   </video>    
   </div>

2. Next, open file templates/ja_mono/css/custom.css then add this code :

.acm-cta {
    position: relative;
}
.fullscreen-bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
    height: 300%;
    top: -100%;
    }
}
@media (max-aspect-ratio: 16/9) {
    .fullscreen-bg__video {
    width: 300%;
    left: -100%;
    }
}

[upweb Friend upwebJoin date: November 2015Posts: 142Downloads:6Uploads:5 Thanks: 2]

#863178

Hi Adam,

thanks , but doing like this there is no background color , so the video runs and we cannot even see the title in the masthead and the html5 box "let’s go"..

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#864130

Hi @upweb,

So try to add the background via custom.css file instead :

.acm-cta .cta-content:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: navy; /* adjust to suite your need */
    opacity: 0.5; /* adjust to suite your need */
}
.acm-cta .cta-content .cta-btn-actions {
    position: relative;
    z-index: 1;
}

[upweb Friend upwebJoin date: November 2015Posts: 142Downloads:6Uploads:5 Thanks: 2]

#864214

Hi Adam,

fantastic.

Actually in this way we also achieve the opacity we cannot with the standard features of the Theme master.

I hope that will be solved in the near future.

P.S. do you confirm that custom.css won’t be overwritten at next update?

thank you

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#864282

Hi @upweb,

Yes, that file won’t be replaced if you update your template via JA Extension Manager component. If you still have any question, feel free to let us know.

Best regards,

Adam.

[upweb Friend upwebJoin date: November 2015Posts: 142Downloads:6Uploads:5 Thanks: 2]

#865621

Hi Adam,

as I mentioned, if we launch the search button from the home page , the background disappears in this configuration.
Is there any way to avoid it?

thank you

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#867594

Hi @upweb,

Since you already submitted another thread about this matter, please kindly post your question there instead if you need any further assistance.

Best regards,

Adam.

[upweb Friend upwebJoin date: November 2015Posts: 142Downloads:6Uploads:5 Thanks: 2]

#869508

Hi Adam,

the issue is related with the code provided here.

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#869625

Hi @upweb,

May I know which line of code above that caused the problem with search function after you added it ?

[upweb Friend upwebJoin date: November 2015Posts: 142Downloads:6Uploads:5 Thanks: 2]

#869627

I guess this part gets overridden once the search is launched in the homepage:

.acm-cta .cta-content:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: navy; /* adjust to suite your need */
    opacity: 0.5; /* adjust to suite your need */
}

[Adam M Moderator Adam MJoin date: May 2014Posts: 5159Downloads:33Uploads:66 Thanks: 95 Thanked: 1271 times in 1235 posts]

#869671

Hi @upweb,

Just check again and look like you’re mentioning about "The CTA Module background changed after hit the search button", the previous reply was a bit confuse. Try adding this code to custom.css file as well :

div.acm-cta {
     background: navy; /* adjust to suite your need */
}

[upweb Friend upwebJoin date: November 2015Posts: 142Downloads:6Uploads:5 Thanks: 2]

#869673

I tried and adding opacity 0.5 to make it transparent, but it just adds a blue navy full color background, covering the video

[Author]

Posts