Question

我当前的代码根据屏幕宽度显示一个独特的图像，用作视频的链接。

            <a href="https://www.youtube.com/watch?v=eabq2KCvhYo&feature=youtu.be">
                <picture>
                    <source srcset="/wp-content/uploads/core-images/thumbnails/showreel_clicker_small.png">
                    <source srcset="/wp-content/uploads/core-images/thumbnails/showreel_clicker_medium.png" media="(min-width: 500px)">
                    <source srcset="/wp-content/uploads/core-images/thumbnails/showreel_clicker_large.png" media="(min-width: 850px)">

                    <img src="/wp-content/uploads/core-images/thumbnails/showreel_clicker_large.png" alt="alt text" width="100%" height="100%">
                </picture>
            </a>

我现在要做的是用鼠标悬停播放的预览视频替换最后一张图片（showreel_clicker_large.png）。我最大的问题是，我不知道如果窗口大小超过850px（可能是桌面宽度），视频才会出现。到目前为止，使用media="(min-width:)的相当简单的尝试只会导致视频和图像的单独元素。

我认为有些JQuery是必要的，但我对该领域并不了解。

Answer 1

你可以试试这个：

var screenwidth = $(window).width(); //get browser window resolution
if(screenwidth > 850) {
  //appear video
} else {
}

如何根据窗口宽度动态切换图像和视频？

1 个答案: