0

メインラッパーをdivにアタッチすることで、ページの背景にYouTubeビデオを追加できるjqueryスクリプト（チューブラー）を使用しています。

ご存知のように、バックグラウンドのビデオはモバイルデバイスでは再生されないため、ページが正しくレンダリングされません。モバイルが検出されたときにビデオが再生されないため、ラッパーを別のラッパーに交換または置換する方法を探しています。サイズにはメディアクエリを使用できると思います（最小幅：765など）。

jquery は以下のラッパーにアタッチされます。

 <body>
 <div id="wrapper"> //<- video starts here 100% width and height //

（コンテンツはここに続きます）..

したがって、理想的には、モバイル (または画面サイズが 765 未満) が検出された場合、スワップは次のように発生します。

<body>
<div id="wrapper-mobile">

（バックグラウンドでビデオなしで上記と同じコンテンツがここで続きます。したがって、基本的にdivはモバイル用に交換されます。明確であることを願っています.. jqueryがid:wrapperを見ると、再生が開始されるので、交換する必要があります.ありがとうこれは単純かもしれませんが、私はそれを楽しんでいます。

4

1 に答える 1

0

フォールバック画像をサイトの本文に配置し、ビデオ ID をページ上の既存の div のデータ属性として定義しました。独自の div を作成するため、チューブラー呼び出しで div を定義しないことにしましたが、#tubular-containerビデオを保持しているdivが何であれ置き換えられます。次に、あなたが言及したメディアクエリ方法を使用することにしました。

CSS 

@media screen and (max-width:765px){
    #tubular-container {
        display: none;
    }
}

JS

var videourl = $('#video-div').data('videoid');
$('#video-div').tubular({videoId: videourl});

私は CSS を使用して非表示にすることを好みますが、おそらくモバイル検出スクリプトを使用して、javascript を使用して div を非表示にすることもできます。たとえば、次のようになります。

if(isMobile()){ 
    $('#tubular-container').hide(); 
}

自動再生が無効になっているかどうかを検出し、代わりにフォールバック画像を使用する、プラグインに組み込まれた背景画像のフォールバックがあることを望みますが、これが私の回避策です。

于 2014-08-31T01:05:50.823 に答える