【发布时间】：2022-08-24 09:50:33
【问题描述】：
正如您所看到的 iframe 高度根据视频而变化，我希望 iframe 视频高度保持不变，因为我正在制作一个允许人们通过我网站上的 iframe 观看 youtube 视频的网站。当页面即将加载时，您可以注意到 iframe 的默认大小，并且视频根据视频进行加载，所以有时高度太小或有时太大，我想将其固定。 https://codepen.io/harvir619/pen/QWmPvKX
\'\'\'<!DOCTYPE html>
<html>
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
<title></title>
<link rel=\"stylesheet\" href=\"https://cdn.plyr.io/3.7.2/plyr.css\" />
<script src=\"https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js\" integrity=\"sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk\" crossorigin=\"anonymous\"></script>
<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js\" integrity=\"sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK\" crossorigin=\"anonymous\"></script>
<link href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx\" crossorigin=\"anonymous\">
<script src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa\" crossorigin=\"anonymous\"></script>
</head>
<body>
<div class=\"row m-0 mt-1\"
style=\"background-image:url(\'https://www.theasset.com/storage/eventimage/202206100949280.beyond-covid-blur.jpg\'); background-size: cover; \">
<div class=\"col-lg-6 col-md-12 p-0\">
<!-- {{-- <iframe style=\"border:none;\"width=\"100%\" height=\"100%\" id=\"videoplayer\" allowfullscreen=\"true\" allow=\"autoplay\"
src=\"https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1&loop=1\">
</iframe> --}} -->
<div class=\"plyr__video-embeds iframe1\" id=\"player\" height=\"100%\" width=\"100%\">
<iframe id=\"videoplayer\" src=\"https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1&loop=1\"
height=\"100%\" width=\"100%\" frameborder=\"0\" allowfullscreen allowtransparency allow=\"autoplay\"
scrolling=\"no\" style=\"\"></iframe>
</div>
<!-- {{-- THE VIDEOPLAYER SCRIPT --}} -->
<script src=\"https://cdn.plyr.io/3.7.2/plyr.polyfilled.js\"></script>
<script>
// Change \"{}\" to your options:
// https://github.com/sampotts/plyr/#options
const player = new Plyr(\'#player\', {});
// Expose player so it can be used from the console
window.player = player;
</script>
</div>
<div class=\"col-lg-6 col-md-12 text-light\">
<div class=\"row\">
<div class=\"col-auto\" style=\" margin-inline: auto; \">
<div class=\"video-wrapper\">
<div class=\"videos\">
<a class=\"video\"
onclick=\"player.source = { type: \'video\',sources: [ { src: \'IlJ_NAvIhX4\', provider: \'youtube\', },],}\">
<span></span>
<img src=\"{{ show_cf_image($the_asset_talk[0]->art_profile_image) }}\"
id=\"{{ basename($the_asset_talk[0]->art_video_url) }}\"
vid=\"{{ basename($the_asset_talk[0]->art_id) }}\"
alt=\"{{ $the_asset_talk[0]->art_videotitle }}\" />
</a>
</div>
</div>
</div>
<div class=\"col \">
<h2 class=\"text-center\">Recommended</h2>
<br>
<h5>{{ $the_asset_talk[0]->art_videotitle }}</h5>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
</div>
</div>
<div class=\"row\">
<div class=\"col-auto\" style=\" margin-inline: auto; \">
<div class=\"video-wrapper\">
<div class=\"videos\">
<a class=\"video\"
onclick=\"player.source = { type: \'video\',sources: [ { src: \'IlJ_NAvIhX4\', provider: \'youtube\', },],}\">
<span></span>
<img src=\"{{ show_cf_image($the_asset_talk[1]->art_profile_image) }}\"
id=\"{{ basename($the_asset_talk[1]->art_video_url) }}\"
vid=\"{{ basename($the_asset_talk[1]->art_id) }}\"
alt=\"{{ $the_asset_talk[1]->art_videotitle }}\" />
</a>
</div>
</div>
</div>
<div class=\"col\">
<h2 class=\"text-center\">Most Watched</h2>
<br>
<h5>{{ $the_asset_talk[1]->art_videotitle }}</h5>
<p>
orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco </p>
</div>
</div>
</div>
enter code here
</div>
</div>
</body>
</html>\'\'\'
标签： html css iframe height plyr