• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
Appfinite

Appfinite

Premium WordPress Themes for The Genesis Framework

  • Themes
  • Blog
  • Tutorials and Resources
  • Forums
  • Contact Us

Problem with FullScreen Youtube video

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

  • This topic has 8 replies, 2 voices, and was last updated 5 years, 1 month ago by wpherc.
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.
Log In

Primary Sidebar

Search Forums

Affiliate Program

Looking to earn some money? Join our Affiliate program and earn 35% of every sale you refer. Top referrers earn 40-50%.

Join Now →

The Genesis Framework

All of our themes are designed for the Genesis Framework. You will need to purchase Genesis in order to use any of our themes.

Purchase Genesis

Hire a Web Developer

Need help setting up or customizing your website?

Contact Us →

Search Full Site

  • Buy Genesis!
  • Shopping Cart
  • Themes
  • My Account
  • Support Forums
  • Tutorials and Resources
  • Privacy Policy
  • Contact Us
  • Follow Us on Twitter

Copyright © 2023 · Appfinite · Built With The Genesis Framework