What are the steps to resize a YouTube embedded video?

I am currently attempting to use a YouTube video as the background for breadcrumbs on my website. However, I am facing an issue with setting the video width to cover the full screen. The image below shows that the video is displayed in the center of the iframe and is not stretched to fit the entire screen size.

https://i.stack.imgur.com/ZMPja.png

/There are black bars on the left and right sides of the video/

Here is the code snippet I am using:

#myVideo {
 position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
   width: 100vw; /* This sets the width to 100% of the viewport (window). */
   display: inline-block;
  min-height: 100%;
  z-index: -99;

}
<div id="myVideo" >
<iframe width="100%" height="300px;" src="https://www.youtube-nocookie.com/embed/eLZUlh1AwrM?loop=1&autoplay=1&playlist=eLZUlh1AwrM&disablekb=1&controls=0&fs=0&modestbranding=1&mute=1&showinfo=0&enablejsapi=1&widgetid=1" frameborder="0" allowfullscreen ></iframe>
</div>

htmlcssvideoiframeembed

Answer №1

The reason for this is that YouTube keeps the aspect ratio consistent. To make it fill the entire width of the page, you must also increase the height accordingly.

Answer №2

To start, enclose your div within another div element with a fixed position.
Next, apply CSS styles to the myVideo element and iframe, using absolute positioning and full height/width for both.

Lastly, in order for this setup to function properly, incorporate media queries based on aspect ratio, adjusting accordingly for ratios above and below 16/9. You can also experiment with different position properties to achieve desired results.

.video-wrapper {
  background: #000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#myVideo, .video-wrapper iframe {
 position: absolute;
 right: 0;
 top: 0;
 bottom: 0;
 width: 100%;
 height: 100%;
}
@media (min-aspect-ratio: 16/9) {
  #myVideo { height: 300%; top: -100%; }
}
@media (max-aspect-ratio: 16/9) {
  #myVideo { width: 300%; left: -100%; }
}
<div class="video-wrapper">
  <div id="myVideo" >
    <iframe src="https://www.youtube-nocookie.com/embed/eLZUlh1AwrM?loop=1&autoplay=1&playlist=eLZUlh1AwrM&disablekb=1&controls=0&fs=0&modestbranding=1&mute=1&showinfo=0&enablejsapi=1&widgetid=1" frameborder="0" allowfullscreen ></iframe>
  </div>
</div>

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

What is the method to incorporate spread into inner shadow within an SVG file?

Seeking assistance with creating an inset-shadow effect with spread for an SVG rectangle in Figma. Check out this example of a rectangle with inner-shadow and spread. I have successfully added blur and positioned the shadow using x and y coordinates, but ...

htmlsvgsvg-filters

Is there a way I can add opacity to a div without impacting the other elements contained in it?

When I set the opacity of a div, it seems to affect all the other elements inside that div by making them transparent too. However, I am looking for a solution where the child elements do not inherit the opacity of their parent. Any assistance on this is ...

css

Vuetify's offset feature seems to be malfunctioning as it does not

I'm facing an issue with the <v-flex> element in my code, specifically with the offset property not responding as expected. Despite following the recommended layout from the vuetify docs, I can't seem to get it right. Below you can see the ...

htmlcssvue.jsflexboxvuetify.js

Is the mobile site displaying CSS pixels in the physical pixel resolution?

I am struggling to grasp the problem and finding it challenging to explain it clearly, so I have attached a picture depicting the issue. https://i.stack.imgur.com/E9Gzj.png My current approach involves using ratios of 100% and 100vw for element widths. D ...

csswebmobile-websitepixel

Encountering a 'Cannot Get /' Error while attempting to reach the /about pathway

I attempted to create a new route for my educational website, and it works when the route is set as '/', but when I try to link to the 'about' page, it displays an error saying 'Cannot Get /about' Here is the code from app.js ...

javascripthtmlnode.jsexpressweb-applications

Ensuring continuous execution of JS EventListener

The other day, I received a solution from someone on this platform for a script that changes the color of a div when scrolling. Here is the code I implemented: const x = document.getElementById("menuID"); window.addEventListener("scroll", () => { ...

javascripthtmlcss

Could you please provide me with the option to send a list of the

Is there a way to send output via email instead of displaying it in the following div: <div id="fullCalendar" ></div> After spending a whole night searching online, I couldn't find a solution. As I'm not very familiar with jQuery pr ...

javascripthtmlajaxfullcalendarfullcalendar-3

Is there a way to escape from an iFrame but only for specific domains?

if (top.location != self.location) { top.location = self.location.href; } If my website is being displayed in an iFrame, this code will break out of it. But I want this to happen only for specific domains. How can I perform that check? ...

javascripthtmliframe

The hamburger menu on the navigation bar only functions the first time it is clicked

I've encountered an issue with my hidden menu nav bar. The hamburger and close buttons only work once. Should I organize the events within a function and call it at the end, or perhaps use a loop for the button events? It's worth noting that I d ...

javascripthtmlcss

The process of altering the color of a table row in JavaScript can be done after dismissing a pop-up that was triggered by a button within the same row

I am tasked with changing the color of a specific table row based on user interaction. The table consists of multiple rows, each containing a button or image. When the user clicks on one of these buttons or images, a popup appears. Upon successful data sub ...

javascripthtmlcss

Transferring the values of JavaScript objects to HTML as strings

My goal is to generate HTML elements based on the values of specific JavaScript objects that are not global variables. However, when attempting to execute the code below, I encounter an error stating "params is not defined." What I actually aim to achieve ...

javascripthtmlstringdom

Performing condition checks within the foreach loop and displaying numerous results in a single row

I have a list of results from searching certain parameters and I need to print them out. When using a foreach loop to print the results, I want to ensure that if the purchase dates are the same, they should be printed in the same row. How can I achieve thi ...

phphtmlhtml-table

What could be causing the audio to not function properly on the webpage I'm working on that has yet to be launched?

As I work on my webpage, I am attempting to incorporate an audio file from SoundCloud. However, it seems that the file is not playing when sourced directly from the SoundCloud website. It works fine when the source is a file stored on my computer. <aud ...

html

Clicking elements reveal but page height remains unchanged?

Clicking on a label within #row-product_id_page-0-0 triggers the display of #row- elements as shown in the code snippet below: $('#row-product_id_page-0-0 label').click(function() { var str = $(this).find('.am-product-title').text ...

javascriptjqueryhtmlcss

The Google map is failing to load on the webpage

My id="ieatmaps" is set up to call the googlemaps.js, but for some reason, it's not displaying correctly. I must be missing something. function initMap() { var map = new google.maps.Map(document.getElementById('ieatmaps'), { c ...

javascripthtmlgoogle-maps

Modifying the input field's name attribute while utilizing multiple datasets in typeahead.js

I am currently utilizing typeahead.js with multiple datasets, following the guidance provided here. I have chosen not to employ Bloodhound in my implementation, resulting in some differences in my code structure, outlined below: $('#search .typeahead ...

jqueryhtmlformstypeahead.js

Multiple web pages utilizing Angular app/widget

I have successfully built a chat application similar to Google Hangouts. However, I am facing a challenge with the angular app/widget running on other pages when URL's are changed, causing the app to either remain fixed or restart on the new web page. ...

javascriptangularjshtmlweb

Do HTML buttons without values get sent in a form submission?

When you have a button with the following code: <button class="button yellow" type="submit" name="button">Log in</button> and you submit it, what exactly gets sent to the server for this specific button that has a name attribute but no value ...

html

"What is the best way to include additional fields within a popover in an AngularJS application

This is my code for implementing a popover using AngularJS. I am trying to figure out how to add custom styling to the popover HTML, but I am having trouble binding elements in that part of the code. <!DOCTYPE html> <html> <head> <l ...

javascriptjqueryhtmlangularjstwitter-bootstrap

IE and Chrome are experiencing issues where the radio buttons are disappearing

Here is the style sheet code: select,input ,td a {border:1px solid green; width:25%;height:25px;font-size:20px;margin- left:.1em;} input.myradio {border:none;width:0%;height:0%;font-size:0%;} And here is the corresponding HTML code: <td><inpu ...

htmlcssinternet-explorergoogle-chromeradio-button