slickスライダーのサムネイルを動画にしたいです

Question

実現したいこと

Slickスライダーで動画のスライダーを作成しています。

スライダー下部のドットを動画（停止状態でAと同じ動画）にしたいのですが
どのようにすればよろしいでしょうか？？

静止画の方法はあったのですが
動画の方法が見つからなかったのでご指摘いただけますでしょうか。

※動画はvimeoを埋め込んでいるのでiframeになっております。
※JSは現状静止画をサムネイルにする式が入っております。

html/js

<!-- slick START -->
<div class="contentss">
  <div class="slick">
    <figure>
      <iframe title="vimeo-player" src="videoA" width="800" height="600" frameborder="0" allowfullscreen></iframe>
    </figure>
    <figure>
      <iframe title="vimeo-player" src="videoB" width="800" height="600" frameborder="0" allowfullscreen></iframe>
    </figure>
    <figure>
      <iframe title="vimeo-player" src="videoC" width="800" height="600" frameborder="0" allowfullscreen></iframe>
    </figure>
    <figure>
      <iframe title="vimeo-player" src="videoD" width="800" height="600" frameborder="0" allowfullscreen></iframe>
    </figure>
  </div>
</div>
<!-- slick END --> 

<!--スライダーJSここから--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="css/slick/slick.min.js"></script> 
<script>
$("document").ready(function(){
  $('.slick').slick({
    autoplay: false,
    speed: 800,
    dots: true,
    arrows: true,
	pauseOnFocus: false,
    pauseOnHover: false,
    pauseOnDotsHover: false,
	customPaging: function(slick,index) {
        var targetImage = slick.$slides.eq(index).find('img').attr('src');
        return '<img src=" ' + targetImage + ' "/>';
    }
  });

}); 
</script> 
<!--スライダーJSここまで-->

css

* {
    margin: 0;
    padding: 0;
  }

  .slider {
    width: 350px;
    margin: 0 0 auto 200px;
  }
  .slick-slide img {
    width: 350px;
	height: auto;
	margin: 0 auto;
  }

.contentss{
	  max-height:300px!important;
      padding-top:50px;
	  margin:0 auto 0 auto;
  }

  .slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
  }


  .slick-next:before{
    background: url(../img/slick/next.png) no-repeat!important;
    background-size: contain!important;
  }
  .slick-prev:before{
    background: url(../img/slick/prev.png) no-repeat!important;
    background-size: contain!important;
  }

  .slick-arrow{
	z-index:2!important;
    width:30px!important;/*矢印大きさ*/
    height:30px!important;/*矢印大きさ*/
  }

Answer 1

var targetImage = slick.$slides.eq(index).find('img')となっていますが、slick.$slidesはfigure要素のため、その直下にはimg要素が存在しないことが原因です。
解決方法としては、figure要素などに適切な属性でサムネイル画像のパスを持たせて、それを使用するのがいいのではないかな、と思いました。

Comments

[Lhankor_Mhy]

と思ったのですが、タイトルを読むと動画のサムネイルも動画にしたいように思えましたので、それであればそもそもimgタグで表示しようとしていることが間違っているかと思いますので、適切な要素を使用してください。

[kimu05]

ご回答ありがとうございます！確認いたします。

[kimu05]

Lhankor_Mhy様
ご回答ありがとうございます！こちら解決できました。
いつも丁寧に説明いただいて恐れ入ります！！