youtubeのサムネイルを自動再生onclick機能に埋め込む方法は？

Question

私はページの読み込み時間を短縮したいので、ビデオのサムネイルのみを表示し、それをクリックすると、ビデオがロードされて自動的に再生されます。

マイCSS：

.art_video_preroll { 
    width:565px; 
    height:318px; 
    margin-left:65px; 
    position:relative; 
    background-repeat:no-repeat; 
    background-position:center center; 
    background-size:cover; 
} 
.art_play_button { 
    width:565px; /*624px;*/ 
    height:318px; /*351px;*/ 
    display:block; 
    text-indent: -99999px; 
    background: url(gfx/play.png) no-repeat center center; 
} 
.art_play_button:hover { 
    background: url(gfx/play_hover.png) no-repeat center center; 
} 

ビデオDIV：

<div class="art_video_preroll" id="embed_video_VIDEOID" style="background-image: url(http://img.youtube.com/vi/VIDEOID/hqdefault.jpg);"> 
<a href="" onclick="return startVideo('VIDEOID', {});" class="art_play_button"></a> 
</div> 

startVideo機能：

function startVideo(code, settings) { 

    // Starts video or preroll banner (requirements: CookieHandler, Base64) 

    if (typeof(settings) == 'undefined') settings = {}; 

    // some default values 
    var width = (typeof(settings.width) != 'undefined') ? settings.width : 565; 
    var height = (typeof(settings.height) != 'undefined') ? settings.height : 318; 
    var type = (typeof(settings.type) != 'undefined') ? settings.type : 'youtube'; 

    var html = ''; 
    switch (type) { 
     case 'youtube': 
      html = '<iframe width="' + width + '" height="' + height + '" src="http://www.youtube.com/embed/' + code + '?autoplay=1&rel=0" frameborder="0" allowfullscreen></iframe>'; 
      break; 
    } 

    var days = 1; 
    var expires = new Date(); 
    expires.setTime(expires.getTime() + (days*24*60*60*1000)); 

    if (
     CookieHandler.GetCookie('video_preroll_views_left') > 0 && 
     typeof(video_preroll_content) != 'undefined' && 
     typeof(video_preroll_totaltime) != 'undefined' 
    ) { 
     // We have to show the preroll banner 

     var vp_vl = CookieHandler.GetCookie('video_preroll_views_left') - 1; 
     CookieHandler.SetCookie('video_preroll_views_left', vp_vl, expires); 

     document.getElementById('embed_video_'+code).style.background = 'none'; 
     document.getElementById('embed_video_'+code).innerHTML = Base64.decode(video_preroll_content); 

     setTimeout(function(){ 

      if (document.getElementById('embed_video_'+code)) { 
       document.getElementById('embed_video_'+code).innerHTML = html; 
      } 

     }, video_preroll_totaltime+300); 

    } else { 
     document.getElementById('embed_video_'+code).style.background = 'none'; 
     document.getElementById('embed_video_'+code).innerHTML = html; 
    } 

    return false; 
} 

今サムネイルが表示され、ホバーボタンは動作しますが、私がクリックした場合画像上でサイト全体がリロードされ、ビデオは開始されません。

thisです。

自分のサムネイルをクリックしたときに動画を再生するにはどのような変更が必要ですか？

Answer 1

再生ボタンは、アンカー要素として定義されています（href = ""）。現在のページ。

ユーザーがクリックすると、リンクが起動し、ページがリロードされます。再ロードを防止するには、アンカーからhref属性を削除します。

ポインタカーソルを保持するには、一貫性のあるUXのためにアンカー要素のCSSにcursor: pointer;を追加します。