Unable to get a facebook video link to work

Support
#1

I have tried various option to get a facebook video to display on my home page.
I have even copied a number of your examples but none of them work either.
Clearly I am missing something.
How can I remedy?
The offending area is at the bottom of the home page
Logon details follow

Also we have just put up our new site and yeost says its “mobile friendly” but the home page mp4 which I use as a background does not load on my mobile - how can I remedy?

And the navigation pancake drops down but then instantly disappears so you cannot get anything to navigate to…?

#2

Hi There,

On your homepage, I can see you just added a video URL. Please use video element. I made a test page. That is how it works normally but then since the source of the video is facebook, there’s a different way of adding/embedding it on your page. See this guide and this too: https://developers.facebook.com/docs/plugins/embedded-video-player. Since there’s a code that is needed to be added after body tag, you need this action and filter hooks.

Hope this helps.

#3

Thanks for that - I will work through it tomorrow but what of the two other issues I asked about??
viz:
Also we have just put up our new site and yeost says its “mobile friendly” but the home page mp4 which I use as a background does not load on my mobile - how can I remedy?

And the navigation pancake drops down but then instantly disappears so you cannot get anything to navigate to…?

#4

Hi,

  1. Please note that when a video is added as background

The video will always autoplay on desktop computers
The video will never have any user-controls
The video will not autoplay on mobile devices (mobile devices don’t allow this)
The video can not be played manually on mobile devices

The remedy is to add a cover image that will replace your video in mobile.

  1. The dropdown is not working because of this code
header .x-navbar .x-navbar-inner ul.x-nav {
    background-position: top left;
    background-repeat: repeat;
    background-size: auto;
    height: 25px!important;
}

Please remove height: 25px!important; or change it to max-height:25px;

Hope that helps.

#5

thats really good thank you so much but in which file is that code for the dropdown menu

naturally this raises the question, how do i put a static image there just for mobiles and still leave the video there for the desktops?

still i am a bit confused as i am talking about my home page background video here (not the facebook link) and mobiles can play mp4’s no? well facebook ones do as i am scrolling through mine. Is there a possible solution?

#6

Check it in your Custom CSS or other plugins that have CSS controls like CSS Hero.

Video image placeholder or poster is an option of the Video Background feature.

Mobiles can play videos. It is only when it’s used as a background that it has a negative impact on page performance. There’s currently no solution for this.

Thanks.

#7

thanks for that help

BUT can you PLEASE tell me in which file is this code???
I cannot find it in CSS Hero

header .x-navbar .x-navbar-inner ul.x-nav {
background-position: top left;
background-repeat: repeat;
background-size: auto;
height: 25px!important;
}

#8

Hi There,

If you don’t see it, try clearing cache. We might be seeing cache content.
See this: https://screencast-o-matic.com/watch/cbQII4Io1M

#9

yes I can see it after following the video but what to do to remove it??

Please explain fully as 24-48 hrs per communication is really testing me…
please use a mobile and go to https://dunedinsegway.com and try to expand the menu…!

#10

We’re not sure where you placed your custom CSS. I checked your Global CSS and it’s not there. Please contact a web developer to find it since we do not have support for customizations and it is the users responsibility to manage customizations.

The problem with the menu might be due to error in the Appearance > Customize > Custom > Global JS. You added <script> tags in there. Please remove all code in there and clear all caches including your browser cache then check again. I tried removing it but the code still exists in the front-end because of caching.

Thanks.

#11

Thank you for that help
I tried what you have suggested and i flushed the webhost cache and browser cache.
I hope that is what you mean.

I personally have developed this web site. So it’s clearly something I have done.

The only css tool I have used is CSS hero- all other CSS has been put into the Custom>css place. Where is the CSS Hero code stored??

I have remove some template files associated with woocommerce which we no longer use. Is it possible that this may have caused it.
I will provide you with my ftp creds and perhaps you could advise me of any files you feel should be removed.

Would it be a strategy to completely remove to menu bar? and redo it…
If so how can I do it so that all the code is removed?
I know I can delete the menu items from Apperance>Menu but will that be enough??

#12

Hi there,

That CSS is coming from CSS hero, when I deactivated the plugin, the menu goes back to normal.

Deleting the menu will not change it because the CSS outputted by CSS Hero like from internal data. Which is why we can’t find it. It’s best to contact the CSS Hero developer or author.

Thanks!

#13

Thanks for that and CSS hero is being helpful
One small thing

There is a small star on the upper rh corner and when I press it it reveals every page in the dashboard>pages in WP. It is mildly useful but how can I get it to display only those pages I want there.?

#14

Are you referring to this?

It’s the Pages widget in Appearance > Widgets > Header 1

Please see https://www.ostraining.com/blog/wordpress/how-to-exclude-a-page-from-the-pages-widget-in-wordpress/ for guidance.

Thanks.,

#15

thats brilliant thank you so much

#16

You’re welcome.