The iframe refuses to center when I adjust its size in the CSS document, but mysteriously shifts to the center when I resize it in the HTML document. I am determined to find a way

My iframe is left aligned and I'm having trouble centering it.

.iframeContainer {
    display: inline-block;
    justify-content: center; /* Center the iframe horizontally */
    align-items: center;
    width: 1067px;
    height: 600px; 
}
<div class="iframeContainer">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/vFO0_PA_NAg?si=VeD7R53zMk8l3yw8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

Resizing the iframe directly in the HTML document seems to work:

<div class="iframeContainer">
        <iframe width="1067px" height="600px" src="https://www.youtube.com/embed/vFO0_PA_NAg?si=VeD7R53zMk8l3yw8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

The CSS should be like:

.iframeContainer {
    display: flex;
    justify-content: center; 
    align-items: center;
}

I also tried using margin:auto, but that didn't help either.

I may be mistaken since I'm new to coding, but I think an iframe is a block element, so I find it puzzling that it works as a flex. Consistency is important, so any advice on this issue would be greatly appreciated.

htmlcssiframe

Answer №1

When using display inline-block with align-items: center; and justify-content, you may encounter issues. It is recommended to remove align-items and justify-content, and instead use display: inline-block along with margin:auto for proper horizontal alignment. Check out the full page snippet below to see the result. Since the iframeContainer div has a display of block, we need to utilize margin: auto.

.iframeContainer {
    width: 1067px;
    height: 600px; 
    margin: auto;
}
<div class="iframeContainer">
    <iframe width="100%" height="100%" src="https://www.youtube.com/embed/vFO0_PA_NAg?si=VeD7R53zMk8l3yw8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 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

What is the best way to customize the default identity pages in an ASP.NET React JS application?

After creating an ASP.NET React JS web application (.NET 7.0) with individual user accounts, I utilized the identity scaffold to incorporate the identity .cshtml pages into the 'Areas' folder. My goal was to style the default identity pages by a ...

cssreactjsasp.net-identityvisual-studio-2022.net-7.0

Changing the background color with a switch function in ReactJS

After clicking a link, a view is rendered based on the "id" from a JSON. To enhance the user experience, I want to add a background color when a particular view renders and also toggle the style. This code snippet illustrates how the crawl is displaye ...

javascriptcssreactjs

Using Custom .woff Format Fonts in Sendgrid: A Guide

Having trouble with implementing custom fonts in Sendgrid. While Google fonts work fine, the custom .woff format font doesn't seem to cooperate. I've attempted three solutions below. Solution number 1 shows up in the Preview tab but not in the em ...

htmlcsssendgrid

Problem with Bootstrap slider animation

Currently, I am tackling a bootstrap slider project, where the images are all in place, and they transition every few seconds. Everything appears to be functioning correctly, except for the animation display. The image changes suddenly without any smooth t ...

javascripthtmlcssdjangobootstrap-4

Getting the hang of revealing a div through flashing

Is it possible to make a div flash using CSS alone? My goal is to have this div alternate between two colors. .chat-window .msg-container-base .notification-message-unread{ float: right; font-size: 10px; color: #666; background: white; padding ...

htmlcss

prepend a string to the start of ng-model

I am looking to enhance my ng-model variable by adding a specific string to it. This ng-model is being used for filtering data, specifically for elements that begin with the term "template". By adding this string to the ng-model, I hope to improve my searc ...

htmlangularjsangular-ngmodel

If the window width is less than the specified value, hide the DIV and replace it with a

I came across a discussion about hiding a div if the screen is narrower than 1024px, and I'm looking to implement something similar based on the quoted code below. Essentially, I want to hide one div (id="krug_wide") if the window width is less than 1 ...

javascriptjqueryhtmlcss

Why are my div elements mysteriously adding bottom margin?

I've encountered an unexpected margin bottom issue while working on some HTML and Bootstrap code. No matter how I try to set the div margin to 0 in a separate stylesheet, like this: body { margin: 0; } div { margin-bottom: 0; } The problem persi ...

htmlcssbootstrap-5

Embrace the power of React using curly brackets!

Today, I made the decision to dive into learning React. Typically, I use Brackets for my coding environment. The first step I took was adding the necessary sources to my HTML code. <html> <head> <link rel="stylesheet" href="styl ...

htmlreactjs

Nesting a DIV tag within another DIV tag

Being relatively new to web design, my understanding of the DIV tag is that it serves as a logical container for whatever content is inside, and those elements will be formatted according to its rules. I have an outer DIV tag styled as <div style="margi ...

htmlalignment

Display a Java applet when HTML text elements are clicked

I am attempting to create a custom jQuery plugin, but I don't have much experience with jQuery and could really use some assistance. Here is the Java Applet that I am referencing: The applet performs certain operations and displays the result in a t ...

jqueryhtmlapplet

Verify the presence of blank space with javaScript

I currently have a text box on my website. <input type="text" name="FirstName" value="Mickey"> My goal is to prevent the user from entering empty spaces, tabs, or new lines in the text box. However, I want to allow spaces between characters. Does a ...

javascripthtml

Modify the HTML to ensure the time value is correctly formatted before it is inserted into the input field

I need to populate a time field on an input form with data from a database. I was able to achieve this for the date field using the following code in the value attribute: "value="{{shipment.pickup_date|date:'Y-m-d'}}">" Ho ...

htmldjangoforms

HTML image vanishes once external jQuery link is incorporated

Although I have added an external link to my JavaScript file (<script type="text/javascript" src="script.js">) in the header of my HTML document, the image on my webpage mysteriously vanishes. HTML: <HTML> <HEAD> <link rel="st ...

javascriptjqueryhtmlimage

Changing an element's color dynamically does not affect the color of the bullet point

When using Chrome (Version 45.0.2454.101 m), I noticed that when I add a class to a list element to change its color, the bullet point color is only updated when the window is resized or repainted. $("#a").click(function() { $("#a").addClass(&apo ...

jquerycssgoogle-chrome

Experiencing problems with jQuery drop-down menus - added arrows to menu links, but menu disappears when arrows are hovered over

My website has a drop-down menu implemented using jQuery, and it works well. However, I'm facing an issue where I want to add an arrow to the links that have sub-menus. The problem is that when you hover over this arrow, technically you're not ho ...

jqueryhtmlcsswordpress

Is the imported style file not properly scoped?

Whenever I attempt to import a CSS file using this method, the styling is not properly scoped. Is it necessary to write the styles within a style tag for them to work correctly? I have been experimenting with this in Vue-cli. <style scoped> @im ...

cssvue.jsvuejs2

Switch the CSS class with an HTML tag

Can someone help me transform this code snippet with Python 3 and Beautiful Soup? <span class="ld-nowrap"> 20th century’s </span> I need to convert it to: <em> 20th century’s </em> Any suggestions on how to achieve t ...

pythonhtmlcssbeautifulsoup

Display unique information according to the value in the form field (email domain)

I've developed an innovative ajax signup form that integrates jQuery and CSS3. The unique feature of this form is its multi-step process. In the first step, users are required to enter their email address and password. What sets this form apart is i ...

jqueryhtmlajaxformscss

What is the best way to center the circle and arrow within the border using CSS?

When the "hit" button is clicked, the arrow should move to touch the circle and change the color of the circle. My goal is to position the circle on the left side and center, with the arrow on the right side and center. section { border: 3px solid bl ...

htmlcss