The height of the iFrame remains unadjustable following the utilization of plyr and Bootstrap

I am looking to keep the height of my iframe video fixed, as it currently adjusts based on the video being played. This is for a website where users can watch YouTube videos through iframes on my site. The default size of the iframe changes as the video loads, which leads to inconsistent heights that I want to avoid.

Link: 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9c908d9abfcdd1ceced1ca">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27454848535453554657671209150917">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
      <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f99b96968d8a8d8b9889b9ccd7cbd7c9">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous"gt;</link>;
       <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8adb6aab6a8">[email protected]</a>/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">
                <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>
    
                <script src="https://cdn.plyr.io/3.7.2/plyr.polyfilled.js"></script>
                <script>
                    const player = new Plyr('#player', {});
                    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>'''
htmlcssiframeheightplyr

Answer №1

I'm not entirely clear on what you're seeking, but consider creating a new style.css file and inputting the subsequent code:

.plyr__video-embed iframe,
.plyr__video-wrapper--fixed-ratio video,
.plyr__video-wrapper.plyr__video-embed {
    min-height: 700px !important;
    max-height: 700px !important;
    height: 700px !important;
}

You can experiment with adjusting the height to suit your preferences.

Answer №2

Experiment with setting the style attribute to "min-height: 50vh; max-height: 50vh;" for your player element

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Skip the loading screen and directly retrieve meshes from the GWT server

I have a unique challenge with my animated models, each ranging from 5Mb to 8Mb in size. Downloading them individually can be time-consuming, especially when I need them on demand rather than preloading them in libGdx. While I am experienced with both GWT ...

htmllibgdxgwt-rpc

Move a div element to the foreground while maintaining its fixed position

I had a situation where I used the fixed position for a div on a webpage to keep it stuck at the top like a header. However, when scrolling, it ended up getting hidden behind other elements such as divs, videos, and text! Here's how the div should al ...

javascriptjqueryhtmlcss

`The font appears extremely thin when viewed on Safari and iOS devices.`

I'm struggling to resolve the issue with super-thin fonts on Safari/iOS despite trying all recommended solutions. Here is the comparison: https://i.stack.imgur.com/5DVHz.png The _document.js file: import Document, { Html, Head, Main, NextScript } fr ...

cssiosmaterial-uinext.jswebfonts

Tips for Concealing PHP Undefined Error Messages Using Echo

I'm new to PHP and I'm attempting to display user information in a div after submission using the echo function. Here is my current code snippet: <label class="input-fields" name="cust-name"> Name <input type="text" id="cust[name]" ...

phphtml

The reason why setting height to 0 is ineffective in a CSS definition

Within my current project, I am utilizing vue.js 2 and have implemented an img component. Below is the code for this component: <template> <div class="banner"> <img class="banner-img" :src="bannerImg"/> </div> </template> ...

javascriptcssvue.jsvuejs2

What is the reason behind Modernizr assigning a drag-and-drop class specifically to iOS devices?

I'm wondering why Modernizr assigns the draganddrop class to iOS devices. It seems challenging to drag and drop files in mobile Safari. Could this be a bug or intentional feature? ...

ioshtmlmodernizr

Ways to place an image above a link when hovered over

How can I create a rollover effect in my navbar using CSS? I want a light bulb icon to appear above a link when the user hovers over it. .navbar .nav a, .navbar .nav .a { font-size: 16px; } .navbar .nav a:hover, .navbar .nav .a:hover { background- ...

htmlcssimagehyperlinkhover

Styles defined in CSS will not be able to be applied to elements that are created dynamically within

I'm having trouble adding dynamically generated list items to an unordered list on my jQuery mobile page. Despite my efforts, the existing CSS doesn't seem to be applied properly to the sortedList ul element. I've experimented with various ...

jquerycssjquery-mobile

An unexpected issue occurred: Unable to invoke method on NPObject

I am new to JSON and having trouble accessing object data. Here is the code snippet: <!doctype html> <html> <head> <meta charset="utf-8"> <title>ajax </title> </head> <body> <p id="p"></p& ...

javascripthtmljson

Encountering problem with loading iframe URL within Angular application

In one of my components in an Angular application, I am attempting to iframe a URL. The HTML code added in the component for the iframe is as follows: <iframe src="https://www.google.com"></iframe> I have included a Content-Securit ...

htmlangularwebiframe

What is causing the initial activation of the <button> within a form?

Within my <form>, I have included 2 submit buttons. The first button looks like this: <button class="regular" id="geocodesubmit" style="height:40px;">Set Location</button> The second button looks like this: <button type="submit" ...

javascripthtmlcssforms

What is the best way to align inline circles created with CSS vertically as the screen size changes?

Looking for resources on how to create circles using CSS? It can be a bit tricky, but here is the code you need: HTML <div id="wrapper"> <ul id="circles"> <li> <div class="circle"><div>K&l ...

htmlcssresponsive-designgeometry

Changing the Width of a Material Icon

I'm currently working with Angular and Angular Material, and I have a md-button that includes both an icon and text. You can view it here: http://jsfiddle.net/u7fp5wxv Here is the code snippet for reference: <md-button layout="row" style="width: ...

cssangularjsangular-material

Utilize the power of MYSQL and PHP in conjunction with an HTML form to

Having trouble with a basic PHP/SQL search bar for my database. The search results are not showing up even though the search bar appears on the page. When I type something, it doesn't reflect in the URL. Below is the code snippet. I am connecting to t ...

phphtmlmysqlmysqli

What is preventing the conditional class in Svelte from being applied when the page loads?

Contextual Background In my exploration of Sveltekit, I set out to construct a dashboard using Bootstrap tab components. To achieve this, I opted to utilize <buttons> instead of <a> tags to prevent redirection to different routes. My goal was ...

htmlcssbootstrap-5sveltesveltekit

Checking for conditions during the loop iteration

I am currently working on an HTML table using AngularJS. Below is the HTML code I have written. Here is the HTML code snippet: <table> <tr ng-repeat="data in myResults"> <td style="text-align: center;">{{data.name}}</td> ...

htmlcssangularjs

The Masonry Grid is leaving empty spaces unfilled

I've been experimenting with Sveltekit and SCSS to create a Masonry grid. However, I'm facing an issue where the items in my grid are not filling in the empty space as expected. Instead, they seem to be following the size of the largest image, le ...

cssflexboxsveltekit

Tips for incorporating an image into the background of a mobile device

My attempt to set an image as a background was successful on desktop, but unfortunately, it doesn't work on my phone. I have specified 'cover' as the background-size, expecting it to cover all the space on mobile as well. Here is the code s ...

htmlcssresponsive-designbackground

Angular Highcharts and NG Grid headers are failing to adhere to the specified frame widths

My app features multiple charts using the highcharts plugin and directive, as well as tables utilizing ng-grid. An issue arises when transitioning from the homepage to a page with a chart or table directly; the elements do not adhere to their designated fr ...

javascriptcssangularjshighchartsng-grid

Is there a way to ensure that the content within a transparent div is completely visible?

Can this be done? If not, does anyone have any creative workarounds? This demonstration will clearly illustrate the issue I am facing http://jsfiddle.net/9AWdz/ ...

css