Problem with FullScreen Youtube video

Homepage › Community Forums › Aspire Theme Support › Problem with FullScreen Youtube video

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • March 20, 2018 at 12:43 pm #22525
    wpherc
    Customer

      Hi,
      I have that site with Aspire Pro installed on it.
      Website: evaemergency.com

      I am trying to paste a youtube video on the frontpage as you can see it.
      The problem is that when somebody click on the “full screen” option inside the youtube video, it does not work, it loads the screen but it is not visible.
      I have tested disabling cache plugins, minification, etc, and it does not work.

      Can you please have a look and let me know where the problem could be?

      I was able to determine that this css code is what is causing the issue.

      /* Fadeup Effect
---------------------------------------------------------------------------------------------------- */

.js .fadeup-effect {
	opacity: 0;
	overflow: hidden;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-timing-function: ease-in-out;
	animation-timing-function: ease-in-out;
}

@-webkit-keyframes fadeInUp {
    from { opacity: 0; -webkit-transform: translateY(20px); }
    to { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to {opacity: 1;transform: translateY(0);}
}

.fadeInUp {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

      Thanks!

      March 21, 2018 at 11:43 am #22532
      Wes
      Moderator

        Yeah I think I’ve ran into that issue a couple years ago, but I don’t remember what I did to fix it.

        One of the things you could do is remove the fadeup effect from the front-page-3 widget area (since that’s the widget you’re using it in).

        You can do this from the front-page.php file. Scroll until you see the front-page-3 section and remove the fadeup effect class. Make sure and do it from the FP3 widget only if you want to keep the effect on the other widgets.

        I tested this while viewing your site and it worked. Let me know if that fixes it.

        March 26, 2018 at 8:04 am #22540
        wpherc
        Customer

          Hi Wes,

          Thank you for your help.
          What is the fadeup css for? My knowledge is limited on this topic. 馃檪

          I will try to do this, but any further update on the theme will override that and generate the problem again, so I would like to have a better solution if it is possible.

          Thanks

          March 27, 2018 at 12:30 am #22541
          Wes
          Moderator

            The fadeup effect is what you see when you visit the homepage. As you scroll down the widgets fade upwards slowly. Take a look at the Aspire demo to see what I’m referring to – http://demo.appfinite.net/aspire/

            Notice when you load the page, all of the widget content (text and images) rise up in to their place? It only happens once. So in order to repeat it you would have to reload the page.

            There are 3 ways to fix the issue. You could either adjust the code in the front-page.php file (looks like you’ve already done that), or you could edit your style.css.

            I would recommend adding this to your Customizer > Additional CSS if you don’t want to edit any of the theme files – 

            .fadeInUp {
    -webkit-animation-name: none;
    animation-name: none;
}

            If you add that, then you shouldn’t have to worry about editing the front-page.php or style.css file (in case of any updates).

            March 27, 2018 at 7:17 am #22542
            wpherc
            Customer

              That seems a better option. Can we change this only for the widget 3?

              Thanks

              March 27, 2018 at 3:22 pm #22545
              Wes
              Moderator

                This should work – 

                .front-page-3 .fadeInUp {
    -webkit-animation-name: none;
    animation-name: none;
}

                Add this to your Customizer > Additional CSS

                March 28, 2018 at 12:07 pm #22546
                wpherc
                Customer

                  That didn麓t work properly. It makes the whole space 3 dissapear.
                  I modify it adding it
                  opacity: initial !important;

                  And now it looks good.
                  Can you confirm that this change is ok?

                  Thanks

                  March 28, 2018 at 4:20 pm #22548
                  Wes
                  Moderator

                    It worked when I tested it yesterday, not sure what’s missing in the code.

                    However, if opacity: initial works then I would just use that for now as long as no other issues show up. Either way should work fine.

                    April 4, 2018 at 4:29 pm #22564
                    wpherc
                    Customer

                      It worked because I had changed the code on the theme files, not because of the css.

                      But is ok, it is working now.

                      Thank you for your help!

                    • Author
                      Posts
                    Viewing 9 posts - 1 through 9 (of 9 total)
                    • You must be logged in to reply to this topic.