Video Loop

[nigelevans]

Hello,

 

I have set a video background to one of my pages. It works fine but it is constantly looping. I only want it to play once and then stop for each page load. I have tried adding loop=0 but this doesn’t work. Can you advise please?

http://revise.iracehonda.com/stylish-woocommerce/

 

Thanks,

Nigel.

 

Nigel.

[nigelevans]

also, related – the video doesn’t show at all in iPad – just white background – any advice? Thanks!

[sharmstr]

You cant put parameters at the end of the url. I believe the only way to do that is to build a slider, then you can set loop video to disable.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

Thanks,

That helps with the first issue. Thanks very much.

Two issues remain, one small and one big however:

Hovering the mouse over the video reveals play and pause buttons even though I have set to hide them.

But mainly, the video layer doesn’t appear on tablet (iPad), but the slider does (ie an additional image layer can be seen but where the video should be is just black.

http://revise.iracehonda.com/

Thanks!

[sharmstr]

Respond privately with admin credentials so I can have a look. Your video isnt showing up on windows 7 / chrome.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

This reply has been set as private.

[sharmstr]

Since you’re using HTML5 video, you needed to specify all video formats to work on all browsers. See if the test video works on ipad now (I dont have one). The hide controls is only for the bottom controls, not for the play and pause. I put this in the VC style settings for the page to hide the play and pause

COPY CODE

.tp-video-play-button {
    display: none !important;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

still doesnt show on iPad.

Thanks for adding that code,

[sharmstr]

Couple of things to check.

Add the video to a post using the WP add media button. Can you see the video on the front end?

Have you tried different browsers?

Just trying to isolate where the issue is?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

I found my iPad. It works fine. But keep in mind that videos dont auto play on mobile devices. Its an industry standard due to data rates.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

Thanks for the message, but how is that possible? I reloaded the page 3 times on my iPad Air just now. The slider revolution does show, as the extra layer I added on top of the video with the logo and couple of sentences is there, but the background is black and the video is nowhere.

[sharmstr]

Did you do the test I suggested?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

If I add the MP4 video to a post (from a link in my S3 account), it shows on iPad (with the play button, not autoplay as we know). Its still not showing as part of the slider we setup though.

Strange!

quick other question – where do I find the controls to make the elements like image and post excerpt to fadein when the page first loads? I have looked everywhere LOL.

[sharmstr]

This reply has been set as private.

[nigelevans]

I loaded MP4, WEBM and OGV versions of video to my server.
I added MP4 (now in server) to a post. It shows up fine on my iPad.
I changed the URL addresses (server) to the video settings in the Slider Revolution slide layer.
STILL doesnt show up on iPad.

Regarding browser – there is only one stock browser on iPad and as i said, the image shows up fine in this browser on the iPad on a post page but does not as part of the Slider on the specific page we are trying to fix.

the other thing I refer to – when you load newsmagazine template for example and scroll down the page, the headings, images and excerpts fade into view, or otherwise animate into view – where are the settings for this please.

[sharmstr]

It depends on the element, that’s why I’m asking. Kleo posts do that by default unless you’ve turned of animations in Theme Options. Other elements do it because of the animation setting in the row settings.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Did you add the slider to a post and test with one of the WP themes? All of these tests are important to determine where the issue lies.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

I havent deactivated in the Theme options.
On this page
http://revise.iracehonda.com/iracehonda-news/
some of the elements have animation but the ones I have recently added (with black background) do not animate and I cannot find the controls to set animation.

[nigelevans]

I added the mp4 file to a post, changed the theme to twentysixteen and the post including the mp4 video shows up fine on the iPad. It shows up fine in Kleo too, its just that it DOESNT show within the slider on that specific page

[sharmstr]

Perhaps you didnt understand. I’d asked you to add a slider to the post, not just the video by itself.

“Did you add the slider to a post and test with one of the WP themes?

As far as the posts go if you use the standard layout, you need to add ‘animated animate-when-almost-visible el-appear start-animation’ to the extra class name. I’ve done that for you in the first column.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[sharmstr]

Or maybe I didnt understand what you mean by specific page. Did you mean you DID try a slider in a post with the wp themes enabled? 🙂 I think I need more coffee….

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

I added the slider to a post, changed the theme to 2016 and the slider does show up on the front end in iPad but NOT the video part, only the background image and the extra layer image with the logo and text.

[nigelevans]

regarding the animation –
I am misunderstanding you here

see attached pics, is this the right place to edit and is this the right text to put in the xtra class box? (see attached)

Attachments:

You must be logged in to view attached files.

[sharmstr]

The problem with the ipad is that its not at the top of the page, but it there and it plays. Check your slider settings for tablets.

I mean the extra css field within the Kleo Post settings.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

I am looking at Slider Revolution and I see that there is a section at the bottom of the Slider Settings – section 4 – Slide Layout, where you can specify the ‘layer size” for tablets. I have increased this to 778 x 960 as a Custom Grid size, which is the maximum allowed – still no video shows up on the iPad. I have tinkered with all the settings I can see in SR. Sorry, but why should this be so complex for something which is integral part of the software, or am I missing something?

Also, I am sorry but i have added the specific text you gave into the Kleo Posts extra class field in one of the on page elements, shown in the attached images and nothing changes. Why is this so complicated! I simply want the posts that appear on this page to be animated, just as they are in the demo.

Thank you

Attachments:

You must be logged in to view attached files.

[nigelevans]

……….and in the demo for News Magazine, the code you mention is not added to Extra Class on the elements that are animated. We just need to change settings somewhere, I just cannot find where.

[sharmstr]

For the animations: As I mentioned, when you select “Standard” in the layout settings for the Kleo Posts shortocode it does NOT animate. Not even on the demo. I added that extra css to get it to work. It does… sort of. The animation happens on page load, not when you scroll so you’re not seeing it, which really isnt the desired effect. If you scroll down to the Kleo Posts sections and refresh, you’ll see what I mean. I’ve added another post shortcode under your motogp one, but set it to grid layout so you can see what I mean about the differences. I’ve also attached a screen shot of the demo site so you can see the different layout sections and what animates and what doesnt. Its not like your site isnt working. Its working as designed. Further evidence of this is by looking at the sites Blog page. If you select Grid or Small Left Thumb, the posts will animate. If you select Standard, they dont. The Kleo Posts shortcode uses the exact same code

Standard (no animation): http://seventhqueen.com/themes/kleo/blog-normal/
Grid (animated): http://seventhqueen.com/themes/kleo/blog/
Left Thumb (animated): http://seventhqueen.com/themes/kleo/blog-left-thumb/

“the code you mention is not added to Extra Class on the elements that are animated.” The News shortcodes animate by default.

Slider: I set everything to Auto size and the video is showing at the top of my iPad now. Test it on yours and let me know.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

Hello,

I really appreciate your patience in trying to get this resolved.

What I cannot understand is how something can be working properly when viewed on one iPad (yours) and STILL not working properly on another iPad (mine). The only thing that is showing up is the cover logo – at least that shows the slider is showing, its just that the video layer is not.

For the animation side of it with the posts I have got that now, thanks for your help!

[sharmstr]

Is the slider at the top of the page now on your iPad? If you click on the cover photo, does it play?

I had a friend check on her ipad and it plays for her as well. It must be something with your ipad. We’ve ruled out Kleo since you have the same problem with the WP theme enabled.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

Hello,

Ive found the problem! The cover pic is there but there’s no indication that the video is also there – when you touch the cover pic the video plays! Now the issue is that we surely need a Play button to be visible otherwise nobody who opens that page on their iPad is going to know that there is a video there. Is there any way that a play button can be configured for tablets and NOT for PC, where it is going to autoplay and doesn’t need a play button?

Many thanks.

[sharmstr]

Instead of the css I gave you before, use this

@media (min-width: 991px) {
.tp-video-play-button {
    display: none !important;
}
}

 Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

Thanks again, but I believe you placed the CSS for this before and I am not sure where. I have tried placing it on the Slider Settings page in the Custom CSS – Section 6 – but this seems to be the wrong place. Please advisE. Thanks again!

[sharmstr]

Check Theme Optons > General > Quick CSS or edit the page and click the gear icon at the top of the VC window.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[nigelevans]

thanks, sorry though neither of those options worked

[sharmstr]

I just did some testing and even if I remove the css I gave you AND turn on the controls the play button doesnt show on iPad. They dont even output a button ( I dug through the source code ). I did a google search and found this which might help you. Just hide the button on large screens: https://www.themepunch.com/faq/play-video-button/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Author]

Posts