WordPressでデバイスのサイズに応じて動画を切り替える方法

WordPressでデバイスのサイズに応じて動画を切り替える方法は、JavaScriptやCSSメディアクエリを使用して実装できます。以下は基本的な手順です：

1. **動画の準備**: 切り替えたい動画を用意します。それぞれの動画には固有のIDを付けておきます。

2. **メディアクエリの設定**: CSSメディアクエリを使用して、デバイスのサイズに基づいてスタイルを変更します。たとえば、スマートフォン用の動画とデスクトップ用の動画のサイズを指定します。

```css

/* スマートフォン向けの動画 */

@media only screen and (max-width: 600px) {

    #desktop -video {

        display: none;

    }

    #mobile -video {

        display: block;

    }

}

/* デスクトップ向けの動画 */

@media only screen and (min-width: 601px) {

    #desktop -video {

        display: block;

    }

    #mobile -video {

        display: none;

    }

}

```

3. **JavaScriptの使用（オプション）**: デバイスのサイズに応じて動画を切り替えたい場合は、JavaScriptを使用してメディアクエリを検出し、それに基づいて動画の表示/非表示を制御します。以下は簡単な例です：

```javascript

// デバイスの幅を取得

var screenWidth = window.innerWidth;

// 幅に応じて動画を切り替える

if (screenWidth <= 600) {

    document.getElementById('desktop-video').style.display = 'none';

    document.getElementById('mobile-video').style.display = 'block';

} else {

    document.getElementById('desktop-video').style.display = 'block';

    document.getElementById('mobile-video').style.display = 'none';

}

```

これらのステップを組み合わせて、WordPressサイトでデバイスのサイズに応じて動画を切り替えることができます。必要に応じて、テーマやプラグインのコードにこれらの変更を組み込むことができます。