ベースビデオsrcサムネイル

Question

多くの掘り下げの後、私は自分のiframeのベースsrcを設定できました。ベースターゲットとベースhrefが不要になりました。それを信用していない、私は自分のニーズに合うようにいくつかの既存の手札を変更しました。リンク用のではなく、映像や画像のサムネイルのベースパスを設定するための素晴らしい作品

https://jsfiddle.net/1fj3gq9s/2/

HTML 

<iframe frameborder="0" width="700" height="430"></iframe> 
<br><br> 
<div class="vidlist"> 
    <a vid="8PdR1_pVNBE">Supernatural Season 1 Episode 1</a> 
    <a vid="lHB2OuQ1AqY">Supernatural Season 1 Episode 2</a> 
</div> 

jQuery 

$('.vidlist a').click(function() { 
    $('iframe').attr('src', 'https://openload.co/embed/' + $(this).attr('vid')); 
    return false; 
}); 

CSS 

.vidlist a { 
    cursor: pointer; 
    color: blue; 
    border: 2px solid blue; 
    padding: 3px; 
    margin: 15px; 
    border-radius: 5px; 
} 

。私は、data-src属性を使用する遅延読み込みビデオにb-lazyを使用しています。私は、ビデオの基本パスを設定して、すべてのリンクを短くしたいと思います。うまくいけば、このプロセスでb-lazyを無効にしないでください。

これは明らかにWeb開発に新しいビーイング

HTML 

<div class="vidlist"> 
    <video data-src="movie.ogg"></video> 
</div> 

jQuery 

$(document).ready(function() { 
    $('.vidlist video').attr('src', 'http://www.w3schools.com/html/' + $(this).attr('data-src')); 
}); 

CSS 

.vidlist video { 
    width: 320px; 
    height: 180px; 
    border: 1px solid black; 
} 

動作しないものです、私は頻繁にちょうど適切な質問をするのか分かりません。私は間違って何をしていますか？実現可能なことをしようとしていますか？遅延読み込みを許可しない場合の回避策はありますか？

Answer 1

Html。

<div class="vidlist"> 
    <video data-src="movie.ogg"> 
    </video> 
</div> 

jQuery。 data-src

$(document).ready(function() { 
    var targetSrc = 'http://www.w3schools.com/html/' + $('.vidlist video').data('src'); 
    $('.vidlist video').append('<source src="' + targetSrc + '" type="video/ogg">'); 
    $('.vidlist video')[0].play(); //Access to js api video object 
}); 

CSSを取得するための最良の使用data方法。あなたのvideo要素の幅と高さ

video { 
    width: 400px; 
    height: 300px; 
} 

を持っていることを確認することは、