Question

我试图让以下视频响应

    <abccs:avplayer data-contentid="123456789" data-width="800" data-alignment="center" data-autoplay="false" data-pr="0" data-adtagsuffix=";player=embedded" style="width: 800px; height: 450px;" class="center"></abccs:avplayer>

我最初创建了三个独立的div，并为每个div分配了一个类，然后使用display：none来隐藏某些屏幕尺寸。但是，在页面上嵌入如此多的内容会导致视频无法加载。有关如何使其响应的任何想法？我不确定要定位什么，因为它不是典型的YouTube或Vimeo链接。

我的原始代码是：

    <div class="media-full">
<div class="media-container">
    <abccs:avplayer data-contentid="123456789" data-width="800" data-alignment="center" data-autoplay="false" data-pr="0" data-adtagsuffix=";player=embedded" style="width: 800px; height: 450px;" class="center"></abccs:avplayer>
</div>

    <div class="media-med">
<div class="media-container">
    <abccs:avplayer data-contentid="123456789" data-width="480" data-alignment="center" data-autoplay="false" data-pr="0" data-adtagsuffix=";player=embedded" style="width: 480px; height: 270px;" class="center"></abccs:avplayer>
</div>

    <div class="media-sm">
<div class="media-container">
    <abccs:avplayer data-contentid="123456789" data-width="320" data-alignment="center" data-autoplay="false" data-pr="0" data-adtagsuffix=";player=embedded" style="width: 320px; height: 150px;" class="center"></abccs:avplayer>
</div>

    .media-container {
margin: 0 auto;
text-align: center;
display: block;
overflow: hidden;}

    @media (min-width: 768px) {
.media-sm, .media-med {
    display:none;
}}

    @media (min-width: 481px) and (max-width: 767px) {
.media-sm, .media-full {
    display:none;
}}

    @media (min-width: 320px) and (max-width: 480px) {
.media-med, .media-full {
    display:none;
}}

但是，我不能再使用这种方法了。虽然它运行良好，但每个视频三次嵌入导致加载时间变慢。

设计HTML数据内容视频，以便它具有响应性

0 个答案: