Is it possible to eliminate the black bars from YouTube HQdefault image using only CSS?

(After searching extensively, I couldn't find the exact same question and answer)

I have a dilemma with displaying YouTube's hqdefault thumbnails on my page. It seems that they are 480 by 360 pixels, resulting in black bars at the top and bottom for all 16:9 ratio videos (which make up the majority).

For example, here is a link to one such thumbnail:

My question is:

I want the image to automatically scale to fit its container's width, which will be a percentage of the total window's width (without knowing the exact pixel value in advance). I also want to hide the black bars without distorting the image's ratio.

Is it possible to achieve this using CSS alone (preferably with good browser support)? I am willing to assume that all images are 16:9, and for those of other ratios, I'm fine with cropping part of the image to display only a portion in 16:9.

Thank you

(PS: Although I have a JS solution, I am curious if this can be accomplished through CSS. The JS solution involves getting the container's width with JS, adjusting it to a 16:9 aspect ratio, stretching the image, centering it, and hiding the excess areas – essentially concealing the black bars at the top and bottom)

htmlcss

Answer №1

I came across this solution. Take a look at this example:

To achieve the desired 16:9 ratio, simply set the div to have a width of 100%, along with a padding-bottom: 56.25%;.

Add overflow: hidden; to keep things tidy, and adjust the positioning with top: -16.75%; to hide any unwanted elements.

HTML

<div class="stretchy-wrapper">
    <div>
        <img src="http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg" style="overflow: hidden; width: 100%;"/>
    </div>
</div>

CSS

body {
    width: 70%;
    margin: 8px auto;
}

div.stretchy-wrapper{
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    position: relative;
    background: blue;
    overflow: hidden;
}

div.stretchy-wrapper > div {
    position: absolute;
    top: -16.75%;
    bottom: 0;
    left: 0;
    right: 0;
}

Answer №2

One possible solution is to use the image as a background for a 16 x 9 div element, and then set the image width to 100% while positioning it at 50% 50%.

div {
  background:url('http://img.youtube.com/vi/dA6Jsr7MWw4/hqdefault.jpg');
  background-size:100%;
  background-position: 50% 50%;
  height:180px;
  width:320px;
  }
<div></div>

Answer №3

Feel free to check out this jsfiddle example that might be of assistance to you. Best wishes!

working linkjsfiddle

This should work seamlessly with your responsive web application/website.

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

How can I stop iOS mobile browsers from automatically opening apps when I click on links?

Recently, I discovered an issue with my website when accessed on mobile (iOS). The links to external websites, such as Amazon product links, are causing the Amazon app to open instead of simply opening a new tab in the browser. The HTML code for these lin ...

javascriptjqueryhtmliosjquery-mobile

In IE9/10, the absolutely positioned pseudo element within a table cell does not fully overlay its parent

My layout includes nested div elements displayed as a table and table-cell, with each cell containing an absolutely positioned :before element that covers the entire cell. While this setup works perfectly in most browsers, I am facing an issue in IE9, 10, ...

htmlcssinternet-explorer

Tips for modifying a text input in a list

Managing comment boxes and buttons for each box can be a bit tricky. Clicking on the edit button should enable only that specific textbox, while save or cancel actions should hide the text box and show "<p></p>". Below is my ng-template where ...

htmlangularlistdrop-down-menung-template

Preventing absolute div from spilling out of its parent container

Within a parent container, I have a lengthy div. I believe that it needs to be positioned absolutely in order to allow horizontal scrolling. My goal is to only display the portion inside the parent div. I attempted setting overflow: hidden on the parent ...

csshtmllayout

What is causing the modal to fail to open when the button is clicked?

My HTML includes a modal that isn't functioning correctly. <!doctype html> <html lang="en"> <head> <title>Rooms</title> <meta charset="utf-8"> <meta name="viewport" conte ...

htmlbootstrap-5

Enhance the appearance of the circular heading

Is there anyway to customize the look of this rounded header? I am having trouble setting a white background. Update #1: This is my current header HTML code: Here is how it currently appears: I utilized Bootstrap along with some custom CSS. Update #2: ...

csshtmlcss-shapes

Ways to include scrolling specifically for one template

As a newcomer to frontend development, I have recently started learning Vue and the Quasar Framework. I am currently working on a table and trying to set a fixed table name with only the table items scrollable. <template> <q-table virt ...

javascriptcssvue.jsquasar-framework

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Hey there, I'm currently facing a major issue with tailwindcss + nextjs... The problem lies in setting classes using a variable. Although the class is defined in the css, tailwind fails to convert it into a style. This is how I need it to be: I&apo ...

cssreactjstypescriptnext.jsclassname

input access is granted through the post method using an integer as the name parameter

Suppose there is a dynamic form with multiple fields generated with integer names based on the iteration that creates them. The goal is to retrieve their values using either post or get method (though focusing on post here). Below is the code for generati ...

phphtmlpostinput

Including files from different directories using PHP

I'm currently involved in a project for school. The index is functioning properly, however, when I click on 'Lab 1 Q1' located at labs/1/1.html, it does direct me to the page but my <?php include('/main-nav.php') ?> isn' ...

phphtmlwamp

Is it better to have a heading titled "Navigation" above a <nav> element, or should it be included inside the navigation element itself?

Which is the better way to structure navigation: <h1>Navigation</h1> <nav> <ul> <li>...</li> </ul> </nav> Or: <nav> <h1>Navigation</h1> <ul> <li>...</li> ...

htmlaccessibilitysemantic-markup

What are the steps for implementing timezone-js?

I found a project on GitHub that claims to convert one timezone to another. I've been trying to get it to work without success. After downloading and extracting the files, I created an HTML file with the following code: <html xmlns="http://www.w3. ...

javascripthtml

The footer navigation in CSS shifts position when it is hovered over

My attempt to add a <nav> at the footer was unsuccessful. The navigation bar in this fiddle is completely wrong as the entire nav moves when hovered, even though I did not include any animations. I want the items in the <nav> to stay fixed. ...

htmlcssnavigation

Trouble organizing a collection of destinations based on their geolocation and proximity

To address this issue, my approach has been to feed variables into the value attributes of an option list and then sort it based on these values. When manually assigning values, everything works smoothly, for example: <option id="link1" value="1">A& ...

javascriptjqueryhtmlcss

Difficulty encountered when applying a CSS class with JavaScript

The Javascript function I am currently using is able to select multiple links. This behavior occurs because of the Regular expression I applied with the '^' symbol. I decided to use this approach because my links are in the following format: htt ...

javascriptjqueryhtml

The .media object in Bootstrap 3 does not experience overflow issues with .dropdown elements

Dropdown menu not displaying fully I have a dropdown menu but it seems to cut off halfway through displaying its content. <div class="media-body"> <h4 class="panel-heading" style="margin:0;"> <div class='btn-toolbar pull-righ ...

htmlcsstwitter-bootstrap

I'm curious about this encoding method. Is there a way to convert it in UIWebView?

Can anyone help me figure out how to display these characters correctly in my UIWebView? The screenshot below shows that some European language characters are not being rendered properly. When I checked the original webpage, everything looked fine, so I th ...

htmlcharacter-encodinguiwebview

What is the best way to choose the nearest element using the initial part of a class name?

I am working on a section of a table and need to hide a specific part when an icon is clicked. Below is the code snippet: <tr class="getmoreinfo_19"> <td>&nbsp;</td> <td colspan="3"> <div c ...

javascripthtml

Utilizing JQuery's $(document).ready() function following a window.location change

I'm having trouble getting a JavaScript function to run after being redirected to a specific page like "example.com" when the DOM is ready for it to work with. Unfortunately, it seems that $(document).ready() is running before "example.com" finishes l ...

javascriptjqueryhtml

I need help with customizing the progress bar in HTML and CSS

How can I create a progress bar like the one shown below: https://i.sstatic.net/BFv87.png .detail-load { height: 42px; border: 1px solid #A2B2C5; padding: 1px; border-radius: 10px; } .detail-load > .detail-loading { ...

javascripthtmlcss