As you can see the iframe height changes according to the video, I want the iframe video height to stay the same as I am making a website that allows people to watch youtube videos through the iframe from my website. You can notice the default size of the iframe when the page is about to load and the video loads it goes according to the video, so sometimes the height is too small or sometimes too big, I wanted to make it fixed. 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/[email protected]/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>'''
try style="min-height: 50vh; max-height:50vh;" on your div with id="player"