ビデオと画像の背景を交互に表示

私のウェブサイトには、ヘッダdiv（ビデオが読み込まれない場合は画像の背景）にビデオ背景があります。ビデオと画像の背景を交互に表示

私がしようとしているのは、その人がウェブ版のサイトを使用している場合にのみビデオを使用することです。モバイル版の場合、私はビデオを望んでいません。

これを行う方法はありますか？

編集あなたの質問には、少なくとも、使用するHTMLマークアップとCSSを含めます。 [ask] – yezzz

を参照してください。これは、モバイルページの読み込み速度を上げたいなどの理由からです。最初のケースでは、デフォルトでビデオをロードせず、モバイルでない場合にのみロードします。 – yezzz

あなたはメディアクエリを使用することができます。これは単なる視覚的要素を非表示になります

#video-container { 
    @media(max-width: 768px) { 
    display: none; 
    } 
}

。

2016-05-05 19:24:49 phynam

それは私の最初の考えでした。しかし、モバイルが768px以上の場合は？ –

あなたはcheck the user agentブラウザの文字列とそれがモバイル/デスクトップの場合はvideoタグを追加/削除することができます：私はチェックしmodernizrを使用することになり、phynamが示唆したように、メディアクエリを使用することに加えて

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { 
    // Javascript to remove video tag 
}

2016-05-05 19:27:14 Uzbekjon

をブラウザで自動再生がサポートされている場合は、ビデオを非表示にしてdisplay:noneで画像を表示します。

2016-05-05 19:39:01

答えて