Viewing 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • upweb Friend
    #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
    #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
    #852879

    Done. Thank you.

    Adam M Moderator
    #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
    #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
    #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
    #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
    #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
    #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
    #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
    #869508

    Hi Adam,

    the issue is related with the code provided here.

    Adam M Moderator
    #869625

    Hi @upweb,

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

    upweb Friend
    #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
    #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
    #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

Viewing 15 posts - 1 through 15 (of 28 total)

This topic contains 27 replies, has 2 voices, and was last updated by  Adam M 8 years, 1 month ago.

We moved to new unified forum. Please post all new support queries in our New Forum