gpt4 book ai didi

html - Bootstrap ,卡+视频不适合手机屏幕

转载 作者:行者123 更新时间:2023-12-03 06:06:20 35 4
gpt4 key购买 nike

我正在使用以下代码将视频放到网站上,但是在垂直方向上,手机屏幕上只能看到视频的左半部分
我不是网络开发人员。有人可以告诉我确切的内容吗,如何使其正确放置在手机屏幕上?
是在youtube iframe链接中还是在 bootstrap 中?

<section class="dark-grey-text text-center">

<!-- Section heading -->
<h3 class="font-weight-bold mb-4 pb-2">Test</h3>
<!-- Section description -->
<p class="grey-text w-responsive mx-auto mb-5">Custom</p>

<!-- Grid row -->
<div class="row">

<!-- Grid column -->
<div class="col-lg-100 col-md-12 mb-4">
<!-- Card -->
<div class="card card-cascade wider card-ecommerce">
<!-- Card image -->
<div class="view view-cascade overlay">
<iframe width="640" height="480" src="https://www.youtube.com/embed/*******?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<!-- Card image -->
<!-- Card content -->
<div class="card-body card-body-cascade text-center pb-0">
<!-- Title -->
<h5 class="card-title">
<strong>
<a href="">Software</a>
</strong>
</h5>
<!-- Description -->
<p class="card-text">Inquire </p>
<!-- Card footer -->
<div class="card-footer mt-4">
<p class="float-left font-weight-bold mb-1 pb-2">10</p>
<a class="float-right material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Add to Wishlist">
<i class="fas fa-heart grey-text ml-3"></i>
</a>
<a class="float-right material-tooltip-main" data-toggle="tooltip" data-placement="top" title="Quick Look">
<i class="fas fa-eye grey-text ml-3"></i>
</a>
</div>
</div>
<!-- Card content -->
</div>
<!-- Card -->
</div>
<!-- Grid column -->
我尝试将其放入style.css,但没有发现任何差异
.iframeVideo {
height: 0px;
padding-top: 25px;
padding-bottom: 56.2%;
position: relative;
}
.iframeVideo iframe {
width: 1%;
height: 100%;
position: absolute;
}

最佳答案

如果您使用的是自举程序,请参阅此以获取自适应视频嵌入。
https://getbootstrap.com/docs/4.5/utilities/embed/

关于html - Bootstrap ,卡+视频不适合手机屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63334082/

35 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com