How to properly position a YouTube video frame in the center?

<section>
    <h3>Find out about us</h3>
     <p>British Airways Virtual is a leading virtual airline within the Infinite Flight community. Boasting a community of over 50 pilots, we offer a vibrant and engaging experience. Come and join us to see for yourself!<br><br>
       For more information, visit our <a href="about.html">about page</a>.</p><br>
       <iframe width="80%;" height="500px;" src="https://www.youtube.com/embed/_g3UgCWAdGg" frameborder="0" allowfullscreen></iframe>
</section>

I'm in need of assistance to center the Youtube iframe. I attempted using CSS without success. Any tips or advice?

To access the complete file, click here: https://github.com/GiacomoLaw/british-airways-virtual/blob/master/index.html

Appreciate your help!

htmlcssiframe

Answer №1

Surround the iframe with a div element and apply the CSS property text-align:center; like this...

.divy {
  text-align: center;
}
<section>
    <h3>About us</h3>
     <p>British Airways virtual is one of the leading virtual airlines for Infinite Flight. We boast a community of over 50 pilots. Join us to experience the thrill yourself!<br><br>
       <div class="divy">
       Visit the <a href="about.html">about page</a> for more information!</p><br>
       <iframe width="80%;" height="500px;" src="https://www.youtube.com/embed/_g3UgCWAdGg" frameborder="0" allowfullscreen></iframe>
  </div>
</section>

Answer №2

Alternatively, you can apply margin: auto along with display: block

iframe {
  width: 80%;
  height: 500px;
  margin: auto;
  display: block;
  }
<section>
    <h3>Get to know us</h3>
     <p>British Airways virtual is a premier virtual airline for Infinite Flight enthusiasts. With a vibrant community of over 50 pilots, we invite you to be a part of it and see it for yourself!<br><br>
       Visit the <a href="about.html">about page</a> for more details!</p><br>
       <iframe src="https://www.youtube.com/embed/_g3UgCWAdGg" frameborder="0" allowfullscreen></iframe>
</section>

Answer №3

For setting the margin to "0px auto" and making it display as a block, follow the code snippet below:

section iframe{
  margin:0px auto;
  display:block;
  width:80%;
}
<section>
    <h3>About us</h3>
     <p>British Airways virtual is one of the largest virtual airlines for Infinite Flight virtual airlines out there. With over 50 pilots, we have a bustling community. Make sure to come over and join us, and experience it for yourself!<br><br>
       Check out the <a href="about.html">about page</a> for more info!</p><br>
       <iframe width="80%;" height="500px;" src="https://www.youtube.com/embed/_g3UgCWAdGg" frameborder="0" allowfullscreen></iframe>
</section>

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 line up my columns when they are split between groups of three and two?

I am having trouble aligning my columns in the way I want. The image shows that some tables have 3 columns while others have 2, and I would like to align the blue with the blue and the red with the red as shown in the picture: https://i.stack.imgur.com/1bL ...

htmlcsshtml-table

What is the best way to remove the background from a button that uses -moz

After adding the select component to my page, I noticed a problem with the select button in Firefox. In Chrome, the arrow down button looks normal, like this, but in Firefox it appears differently, as shown in this image. How can I remove the background ...

htmlcssfirefox

What is the best way to center my dropdown menu on the page?

Discover my exclusive menu by visiting this link. For those who are curious about the source code, here's the HTML snippet: <div id='menu-container'> <ul id='menu' class="menu"> <li class='active'>& ...

htmlcssdrop-down-menualignment

The background color of the body is being utilized by Div in Internet Explorer version 7

Within my HTML document, I have created a container div that holds several nested divs for a slideshow effect. This "container" div is positioned over the background image of the body element. The CSS styling for the body element is as follows: body { ba ...

csshtmlinternet-explorer-7background-color

Incorporating Stripe: Enhancing Online Payments through Redirected Checkout

I am currently in the process of upgrading our checkout system to be SCA compliant. According to the documentation, I must utilize PaymentIntents for this purpose. I have followed the steps outlined in their document found at: https://stripe.com/docs/payme ...

javascriptjavahtmlstripe-payments

CSS animation fails to execute

I created a rotating carousel using CSS. The carousel is constructed using the 'ul' tag. To navigate left or right, I dynamically add a 'li' element to the left or right of the list by cloning the necessary value and appending/prependin ...

jquerycssjquery-pluginscss-transitionscarousel

Unable to scroll through embed code on iOS responsive devices

-webkit-overflow-scrolling: touch; overflow-y: scroll; I have attempted using this code but unfortunately it is still not functioning as expected. The issue seems to only occur on iOS responsive devices, as it works fine on other devices including MAC. ...

iosiphonecssresponsive-designresponsive

Retrieving Blocked Images with Selenium: A Step-by-Step Guide

HTML: <html> <head> <body onload="document.getElementById('a').style.display='block';"> <div id="a" align="center" onclick="document.location.reload();" style="display: block; cursor: pointer;"> <img width="9 ...

javascripthtmlcssseleniumselenium-webdriver

Using the Jquery validation plugin for Internet Explorer 9 when the website first loads

Our website is currently using Jquery v1.9.0 and jquery validation plugin v1.10.0. The form on our site consists of two text boxes and a submit button. When the submit button is clicked, the input elements are validated and a JavaScript function is trigger ...

javascriptjqueryhtmlvalidationinternet-explorer

Superimpose two actionlinks and prioritize the one appearing above

I have implemented a menu similar to http://tympanus.net/Tutorials/SlideDownBoxMenu/. Below this menu, I have placed a webgrid. The issue I am facing is that when I hover over the menu, the slidedownbox with two action links pops up directly over the heade ...

jqueryhtmlcssasp.net-mvc-4

The appearance of HTML varies depending on the type of mobile device being used

My email template is having display variations on different mobile devices, with the textbox sometimes centered instead of left aligned as intended. Any suggestions on what might be causing this issue and how to resolve it? Desired Display on All Devices ...

javascripthtmlcssresponsive-design

Arrange a div beneath another div that is positioned absolutely

Within my code, I have a div with the property of absolute positioning referred to as "abs". Right after this div, there is another div called "footer" which does not have any specified position value assigned to it. Even though I've experimented with ...

htmlcss

Transferring data from JavaScript to PHP for geolocation feature

Hello everyone, I'm looking to extract the longitude and latitude values from my JavaScript code and assign them to PHP variables $lat and $lng. This way, I can retrieve the city name and use it in my SQL query (query not provided). Below is the scrip ...

javascriptphphtml

Problem encountered while extracting data from HTML structure using indexing

My current task involves scraping data from a specific html structure found on 30-40 webpages, such as the one below: https://www.o2.co.uk/shop/tariffs/sony/xperia-z-purple/: <td class="monthlyCost">£13<span>.50</span></td> ...

pythonhtmlpython-2.7html-parsingbeautifulsoup

The horizontal overflow in the HTML code was unsuccessful

I stumbled upon an interesting issue where I applied a div with specific styling: overflow-x: scroll However, the outcome was not as expected. Instead of overflowing, the content simply started on a new line. Here is the source code for reference: & ...

javascriptjqueryhtmlcss

Troubleshooting CSS3 @keyframes animation issues within Firefox's shadow DOM

I am currently working on creating a custom shimmer loader using CSS3 keyframes animation within the shadow DOM. While the shimmer effect displays perfectly in Chrome and Safari, it seems to be malfunctioning in Firefox. Below is a concise snippet that de ...

cssfirefoxcss-animationsshadow-dom

Having trouble getting the toggleClass function to work properly?

I'm facing an issue with some straightforward code that I've written. $(function() { $("#tren").click(function() { $("#trens").toggleClass("show"); }); }); .show { color: "red"; } <ul> <li id="tren">Some text</li> < ...

javascriptjqueryhtmltoggleclass

Tips for aligning two elements in a row using Bootstrap 4 Flex

I am facing a challenge with positioning an H2 element and a Dropdown button on the same line using bootstrap 4 flex. Here is what I have: https://i.sstatic.net/kV45k.png This is what I am trying to achieve: https://i.sstatic.net/Owt5j.png Below is my ...

cssbootstrap-4

Incorporate ng-click as an attribute in AngularJS

Is there a way to include ng-click as an attribute? For example, imagine I want to add ng-click if my <li> has the class someClass: angular.element(root.querySelector('li.someClass').attr({'ng-click': 'someFunc()'}); ...

javascriptjqueryhtmlangularjs

When the sidebar is set to position: fixed, the icons magically vanish

This CSS is specifically for the side navigation bar. .side-nav { // position: sticky; top: 0; left: 0; height: 100vh; z-index: 100; width: calc(3.5vw + 3.5vh); // position: fixed; &.content { height: 100%; display: flex; fl ...

csssass