问题描述
我试图让视频显示为它们所在 div 的完整尺寸。
一切都是用js加载的，我使用jquery和经典的css/html/Ajax来获取数据
有人知道如何让它工作吗？
我尝试了很多东西，但使用绝对位置确实对我有用..也许我错过了一些东西..
<section class="section">
<div id="videos">
<div id="1" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/1.jpg') 10%;"><video id="1" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/1.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">Mes 120 Kg</div>
<div class="legende">@Anonymous</div>
</div>
<div id="2" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/2.jpg') 10%;"><video id="2" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/2.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="3" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/3.jpg') 10%;"><video id="3" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/3.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="4" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/4.jpg') 10%;">
<video id="4" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/4.jpg" preload="Metadata" playsinline="1"></video>
</div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="5" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/5.jpg') 10%;"><video id="5" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/5.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="6" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/6.jpg') 10%;"><video id="6" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/6.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="7" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/7.jpg') 10%;">
<video id="7" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/7.jpg" preload="Metadata" playsinline="1"></video>
</div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="8" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/8.jpg') 10%;"><video id="8" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/8.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="9" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/9.jpg') 10%;"><video id="9" class="videoFile" src="./videos/exemple.mp4" type="video/mp4" poster="./thumbnails/9.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="31" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/31.jpg') 10%;"><video id="31" class="videoFile" src="./videos/31.mp4" type="video/mp4" poster="./thumbnails/31.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="32" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/32.jpg') 10%;"><video id="32" class="videoFile" src="./videos/32.mp4" type="video/mp4" poster="./thumbnails/32.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="33" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/33.jpg') 10%;"><video id="33" class="videoFile" src="./videos/33.mp4" type="video/mp4" poster="./thumbnails/33.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="34" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/34.jpg') 10%;"><video id="34" class="videoFile" src="./videos/34.mp4" type="video/mp4" poster="./thumbnails/34.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="35" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/35.jpg') 10%;"><video id="35" class="videoFile" src="./videos/35.mp4" type="video/mp4" poster="./thumbnails/35.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="39" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/39.jpg') 10%;"><video id="39" class="videoFile" src="./videos/39.mp4" type="video/mp4" poster="./thumbnails/39.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="40" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/40.jpg') 10%;"><video id="40" class="videoFile" src="./videos/40.mp4" type="video/mp4" poster="./thumbnails/40.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="41" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/41.jpg') 10%;"><video id="41" class="videoFile" src="./videos/41.mp4" type="video/mp4" poster="./thumbnails/41.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="42" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/42.jpg') 10%;"><video id="42" class="videoFile" src="./videos/42.mp4" type="video/mp4" poster="./thumbnails/42.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="43" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/43.jpg') 10%;"><video id="43" class="videoFile" src="./videos/43.mp4" type="video/mp4" poster="./thumbnails/43.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="44" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/44.jpg') 10%;"><video id="44" class="videoFile" src="./videos/44.mp4" type="video/mp4" poster="./thumbnails/44.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="45" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/45.jpg') 10%;"><video id="45" class="videoFile" src="./videos/45.mp4" type="video/mp4" poster="./thumbnails/45.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="46" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/46.jpg') 10%;"><video id="46" class="videoFile" src="./videos/46.mp4" type="video/mp4" poster="./thumbnails/46.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
<div id="47" class="videoBox">
<div class="bgVideo" style="background: url('./thumbnails/47.jpg') 10%;"><video id="47" class="videoFile" src="./videos/47.mp4" type="video/mp4" poster="./thumbnails/47.jpg" preload="Metadata" playsinline="1"></video></div>
<div class="font-weight-bold legende">exemple</div>
<div class="legende">@Anonymous</div>
</div>
</div>
</section>
用于网页设计的 CSS 文件：
body{
margin-left: 3%;
margin-right: 3%;
display: flex;
flex-direction: column;
}
.videoFile{
width: 248px;
height: 250px;
}
.videoBox{
min-width: 250px;
min-height: 250px;
max-height: 20%;
max-width: 20%;
border: 1px solid lightgrey;
margin-bottom: 0.75%;
}
.bg{
position: relative;
}
.bgVideo{
display: flex;
justify-content: center;
/*filter: blur(4px);border: 1px solid blue;z-index:-1*/
}
#videos{
width: 90%;
margin-left: 5%;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.recherche{
width: 25%;
min-width: 300px;
margin: 2%;
}
.legende{
margin: 2%;
}
video{
-webkit-appearance: none;
}
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
video::--webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）