Top man. Thank you again. No problem in waiting for a fix.

In the meantime, sorry to take up more of your time, but I am trying to display multiple videos on the homepage without taking up huge amounts of space, hence trying to use the sliders.

I tried to use the Content Slider instead, set to auto-rotate 4-5 videos in pairs, but now I notice that when you click play the slider continues to slide and slides the video, now playing, straight off screen.

1) Is there a way to stop the Content Slider sliding when a video is playing?
2) Do you have any other possible ideas or suggestions as to how I can display 4-5 video in a slider that will play both on desktop and mobile? Fallback images are no good.

I just wish I could you use your built in sliders, but I cant as they will not show the videos on mobiles (which you can do with LayerSlider).

Hi
Thanks for your help.
It works OK on desktop but on a mobile the button is over the top of the logo, is there a way to make the button appear underneath the logo on mobiles?
Regards
Kenny

Topic can be closed. Solved the problem by adding icon

Hi,
Ok figured it out. First remove the thumbnail function and create your own:

add_action( 'after_setup_theme', 'remove_thumbnail_enfold', 0 );

function remove_thumbnail_enfold($asdf) {

    remove_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail' );
}

add_action( 'woocommerce_before_shop_loop_item_title', 'avia_woocommerce_thumbnail_custom', 10);
function avia_woocommerce_thumbnail_custom()
{
	global $product, $avia_config;
	$rating = $product->get_rating_html(); //get rating

	$id = get_the_ID();
	$size = 'shop_catalog';

	echo "<div class='thumbnail_container'>";
		echo avia_woocommerce_gallery_first_thumbnail( $id , $size);
		echo get_the_post_thumbnail( $id , $size );
		echo "<div class='middle'><div class='hover'><img src='http://domain.com/link-to-your-image.png'></div></div>";
		if(!empty($rating)) echo "<span class='rating_container'>".$rating."</span>";
		if($product->product_type == 'simple') echo "<span class='cart-loading'></span>";
	echo "</div>";
}

Then in CSS:

.attachment-shop_catalog {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%)
}

.thumbnail_container:hover .attachment-shop_catalog {
  opacity: 0.3;
}

.thumbnail_container:hover .middle {
  opacity: 1;
}

Thanks for the info. I have written them, because it ruins my preview experience entirely. When I view changes in my page there is now a big blue banner at the top of the page I cannot get rid of, unless I log out of the session and view the page without being logged in. I will keep complaining to them, because this is unacceptable.

Now it scrolls. But it scrolls all the way through the page and doesn’t stop at the bottom of the menu list as supposed to.

sorry i meant move to top, not remove ;)

I ended up finding an easier solution than editing the JS:

.avia-fullscreen-slider .avia-slideshow>ul>li {
    height: calc(100% - 250px) !important;
    margin-top: 250px !important;
}