0

私はこれのいくつかの実装を見てきましたが、これまでのところどれも機能していないので、投稿することに頼っています. コンセプトは次のとおりです。一度クリックするとビデオと自動再生に変わるプレースホルダー画像。

現在の HTML:

<div id="ytvideo" style="display:none;">
    <iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="/wp-content/uploads/2013/10/placeholder.jpg" width="940" height="548" />

現在の JS:

jQuery(document).on('click','#homevideo',function(e){
    jQuery('#ytvideo').show();
    jQuery('#homevideo').hide();
    jQuery('#ytvideo').attr("src","www.youtube.com/embed/[myvidid]?autoplay=1");
    jQuery("#ytvideo").attr('src', jQuery("#ytvideo", parent).attr('src') + '?autoplay=1');
});

をリロードしようとしましたiframeが、うまくいかないようです。

何か案は？

マーク: 修正済み

4

5 に答える 5

1
于 2013-10-02T08:06:19.793 に答える
1

コメントの 1 つで説明されているように、API から img とビデオの両方を取得できます。

これは、イメージを維持したくない場合に適しています。YouTube から取得したいだけです。(ただし、YT が 939 もの大きな画像を提供しているかどうかはわかりません。そのため、独自の画像を使用することをお勧めします)。ランダムなチャンネル名 'RIDEChannel' を入れました。お好みのチャンネル名に自由に変更してください。

<div id="vid"></div>

$.getJSON("http://gdata.youtube.com/feeds/api/users/RIDEChannel/uploads?max-results=1&v=2.1&alt=jsonc&callback=?", function (myvid) {
    var vid = $("#vid");
    $.each(myvid.data.items, function (i, item) {
        vid.append("<img width='300' height='250' src='" + item.thumbnail.hqDefault + "'>");
        $(document).on("click", "#vid img", function (event) {
            vid.append("<iframe width='300' height='250' src='http://www.youtube.com/embed/" + item.id + "?autoplay=1' frameborder='0'></iframe>");
            $(this).hide();
        });
    });
});
于 2013-10-02T09:17:14.120 に答える
0

そのため、問題は YouTube の URL に http:// プレフィックスがないことと、iframe 名が含まれている div と同じであるという事実にありました。 、iframe ではありません。

于 2013-10-02T08:10:55.437 に答える
0

ワーキングデモ

これを試して、

まず、複数の要素に対して同じ ID を持つことはできません<div id="ytvideo"。<iframe id="ytvideo"

[myvidid] in http://www.youtube.com/embed/[myvidid]?autoplay=1 は動画の ID に置き換える必要があります

html

<div id="ytvideo1" style="display:none;">
    <iframe width="939" height="528" id="ytvideo" frameborder="0" allowfullscreen></iframe>
</div>
<img class="aligncenter size-full" id="homevideo" alt="placeholder" src="http://thefabweb.com/wp-content/uploads/2012/12/6191814472_fa47c79b67_b-900x600.jpg" width="940" height="548" data-vid='DBNYwxDZ_pA'/>

コード

jQuery(document).on('click','#homevideo',function(e){
jQuery('#ytvideo1').show();
jQuery('#homevideo').hide();
jQuery('#ytvideo').attr("src","http://www.youtube.com/embed/"+$(this).data('vid')+"?autoplay=1");
});
于 2013-10-02T08:25:06.890 に答える
0

複数のビデオがある場合は、ビデオへの URL を html に保存し、id の代わりにクラスを使用すると便利です。

また、プレビュー画像をビデオの後ろの背景に配置すると、iframe が読み込まれるまでそこにとどまり、クリックしたときの「ちらつき」効果が減少します。

また、冗長性を減らすためにマークアップを少し再構築しました。ここでは、ビデオのサイズとビデオ ID を 1 回だけ指定します。

また、最初に起動した後にそのイベント リスナーを削除する必要があるため、の.one('click')代わりにjQuery を使用する必要があります。.click()

html:

<div class="ytvideo" 
     data-video="73sgatbknvo"
     style="width:939px; height:528px; background-image:url(http://lorempixel.com/939/528/)">

     <div class="seo">
         Have a meaningful description of the video here
     </div>
</div>

CSS:

.ytvideo {
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
}
.ytvideo iframe {
    border-style: none;
    height: 100%;
    width: 100%;
}
.ytvideo .seo {
    display: none;
}

jQuery:

$('.ytvideo[data-video]').one('click', function() {
    $(this).html('<iframe allowfullscreen  src="//www.youtube.com/embed/'+$(this).data("video")+'?autoplay=1"></iframe>');
});

スクリプトをサポートしていないブラウザーをサポートする場合は、iframe が既に含まれている .ytvideo div に「noscript」要素を追加する必要があります。

フィドル: http://jsfiddle.net/6ARc7/

于 2013-10-02T08:28:57.400 に答える