Problem with FullScreen Youtube video

This topic has 8 replies, 2 voices, and was last updated 4 years, 6 months 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.