Banner with video background (not taking up the entire page)

I'm currently working on a website project that involves using a YouTube video as the banner, but I'm facing some challenges in making it work correctly.

So far, this is what I have:

#video-background {
  position: absolute;
  right: 0;
  top:135px;
  left:0;
  bottom: 0;
  width:100% !important;
  width: auto; 
  height:50vh;
  min-height: 550px;
  z-index: 99;
}

<div id="video-background">
  <iframe frameborder="0" height="100%" width="100%" 
    src="https://www.youtube.com/embed/.....">
  </iframe>
</div>

My main issue now is that there are large black borders surrounding the video on larger screens, and the responsiveness of the video is not optimal.

jqueryhtmlcssyoutube

Answer №1

To ensure proper layout, you must reserve space within the containing element and then absolutely position the child (iframe).

Consider using this CSS:

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* This creates a 16:9 aspect ratio */
    padding-top: 25px;
    height: 0;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Include this HTML structure as well:

<div id="video-wrapper">
    <div class="video-container">
        <iframe frameborder="0" src="https://www.youtube.com/embed/.....">
        </iframe>
    </div>
</div>

You can find more information about this technique on: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer №2

Create a full window video with a better border.

<div class="video-size ">
  <iframe  src="https://www.youtube.com/embed/KRRiZs_nr5w" frameborder="0" allowfullscreen></iframe>
</div>

.video-size {
    position: relative;
    padding-bottom: 50%;
    padding-top: 14%;
    height: 0;
}
.video-size iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

Check out the live code and Preview here 

.video-size {
    position: relative;
    padding-bottom: 50%;
    padding-top: 14%;
    height: 0;
}
.video-size iframe {
    position: absolute;
    width: 100%;
    height: 100%;
top: 0;
    left: 0;
}
<div class="video-size ">
  <iframe  src="https://www.youtube.com/embed/KRRiZs_nr5w" frameborder="0" allowfullscreen></iframe>
</div>

Answer №3

Take a look: 

.video-size {
    position: relative;
    padding-bottom: 50%;
    padding-top: 14%;
    height: 0;
}
.video-size iframe {
    position: absolute;
    width: 100%;
    height: 100%;
top: 0;
    left: 0;
}
<div class="video-size ">
  <iframe  src="https://www.youtube.com/embed/KRRiZs_nr5w" frameborder="0" allowfullscreen></iframe>
</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

Guide to incorporating a logo into a personalized WordPress theme

In the process of creating a WordPress theme from scratch, I've hit a roadblock while trying to incorporate a logo in the top left corner of the page where the title would normally be displayed. <h1> <a href="<?php echo home_url(); ?> ...

phphtmlcsswordpresswordpress-theming

Why is Ajax having trouble showing PHP's JSON data? What could be causing the issue with the JSON format?

After thoroughly reviewing all related questions on the topic, I still haven't been able to find a solution. When I attempt to integrate JSON into my PHP and AJAX code for passing data, that's when the trouble begins. Here is the AJAX portion o ...

phpjqueryjsonajax

Is there a way to alter the color of a single row within a column in a jtable based on a specific condition?

statusOfPayment: { title: 'Status of Payment', width: '8%', options: {'Paid': 'Paid', 'Due': 'Due'}, create: false, ...

javascriptjqueryjspjtable

Calibrating height using CSS

Within my HTML document, I have the following structure: <div id="content"> <div id="wrapper"> <div id="steps"> <form id="formElem" name="formElem" action="" method="post"> <fieldset class ...

csshtmlheightfieldset

What could be the reason for my code showing "success" instead of the intended outcome?

I'm currently working on a project that focuses on verifying whether ingredients are halal or haram. MongoDB is being used to store ingredient information, and express is managing the requests. After sending a GET request to /ingredients/{ingredientn ...

jquerymongodbexpress

Tips for implementing version control for css, js, and jsp files

I've created a single-page web application with multiple views, utilizing ng-if for rendering. These views lack headers or body sections and consist only of HTML code. Each view is managed by a separate controller, with many click functionalities han ...

javahtmlangularjsspring-mvcjsp

The JTSage date box is not visible when there is no input field being displayed

Currently, I am attempting to integrate the JTSage date box into my modal window. When I use the standard method (displaying the input text and clicking the input field), the date box appears as expected. However, I am trying to implement the No Input Di ...

jquerydatebox

What is the best way to exclude HTML tags from the innerHTML attribute?

Currently, I am in the process of developing a messenger application and facing an issue where my messages are not ignoring HTML tags. This is happening because I directly paste the input text into the innerHTML of the message. The code snippet responsible ...

javascripthtmltagsescaping

Leveraging jQuery within Node.js

Greetings, I am a newcomer here and I hope that my message is clear. My current challenge involves trying to incorporate jQuery into node.js, but unfortunately, all my efforts have ended in failure. I have spent hours attempting to resolve this issue to no ...

javascriptjquerynode.jsjsdom

Unable to utilize the full column space provided by bootstrap

I need assistance in making three buttons span the entire width of a column. The grid consists of 3 sections for the buttons and 9 sections for other components. Here's a visual reference. Essentially, the buttons should take up the space highlighte ...

htmlcssreactjsbootstrap-4material-ui

The click event will only be activated upon refresh

Here's my issue: I've set up a page with some buttons and a jQuery script that looks like this: $( document ).bind( 'mobileinit', function(){ $.mobile.loader.prototype.options.text = "loading"; $.mobile.loader.prototype.option ...

jqueryjquery-mobile

Using jQuery to target adjacent elements excluding those that are separated by other text

I have been attempting to locate and combine adjacent em tags within paragraphs, but it has proven to be a more challenging task than I initially anticipated. Let's explore some examples to illustrate this issue: <p><em>Hello</em>&l ...

javascriptjqueryhtmltraversal

"Enforce a specific height on a div that is exclusively showing a background

I have been trying to use a div element to showcase a specific color, where the background color acts as the content. However, no matter what height or width settings I input, I am unable to achieve the desired size for the div. Even after experimenting w ...

htmlblazorheight

What is the best way to attach an event listener to detect the coordinates where a click occurs inside a div element?

Imagine a situation where you have a div container measuring 200px by 500px. The goal is to implement an event listener that can identify the x and y coordinates within this div when it is clicked. What would be the approach to achieve this in React? ...

javascripthtmlreactjs

How to make text transition between colors using CSS or jQuery

I'm looking to make a text blink with alternating colors: For instance: blinking a text with white, green, white, green, white, green I am open to either using jQuery or CSS. ...

jquerycssblink

Ways to adjust the size of an HTML fieldset?

Is there a way to decrease the space between the paragraph and the border of this fieldset? I attempted to adjust the margins in the following manner: fieldset { margin: 1px; margin-top: 2px; border-top-right-radius: 1px; } <fieldset> < ...

htmlcss

Tips for removing duplicate objects from an array

I am utilizing the underscore.js plugin in my code I experimented with it on jsfiddle var basket=[{ "basketitems":[{"items":[]}], "itemdetails":[{ "amountPledged": "100", "bActivity": "Handloom Wo ...

javascriptjqueryunderscore.js

Vertically align the left div in the center, while maintaining the standard alignment of the right div

I have been experimenting with Bootstrap 4 and attempting to implement the Vertical alignment feature as outlined on the webpage: https://getbootstrap.com/docs/4.0/layout/grid/ Despite reviewing my code multiple times, I am unable to identify the mistake ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

There seems to be a glitch with the Flask flash messaging feature, as

My Flask application includes login and register routes where I aim to display flash messages when username passwords are not matched. Specifically, this issue arises in my index and login routes: @app.route('/') @login_required def index(): ...

pythonhtmlflaskwebflash-message

Guidelines for determining a screen's location using Javascript

I have integrated a label onto an image and I am trying to figure out how to determine the exact position of each label on the screen. Is there a way to retrieve the screen coordinates for each label? Below is the code snippet that I have uploaded, perha ...

javascriptcssthree.js