Tips for aligning text centrally beneath an iFrame without it getting pushed off course by the wrapped text

My iframe is floating left with text wrapped around it. I have been trying to center align the text below it, but all my attempts seem to mess up the entire format. I have included the code and preview link here: https://codepen.io/Religion/pen/QWydbow. Thank you!

<style>
 .container p {
  font-size:1.2rem;
 }

.container {
  height:100%;
  max-height:100%;

}



</style>


<div class = "container">

   <iframe style = "float:left;margin:5px 25px 0 0;margin-bottom:20px;  width:350px; height:300px;" src="https://embed-fastly.wistia.com/deliveries/7f74ec7de31d90e32a1d465fcebc1d0e12a27d18/file.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>


<h2 class = "all-headings">Periodontal Maintenance</h2>
<p><strong>Periodontal diseases are infections of the gums, which gradually destroy the support of your natural teeth.</strong> There are numerous disease entities requiring different treatment approaches. Dental plaque is the primary cause of gum disease in genetically susceptible individuals. Daily brushing and flossing will prevent most periodontal conditions.</p>
<br>
<h2 class = "all-headings">Why is oral hygiene so important?</h2>

<p>Adults over 35 lose more teeth to gum diseases, (periodontal disease) than from cavities. Three out of four adults are affected at some time in their life. The best way to prevent cavities and periodontal disease is by good tooth brushing and flossing techniques, performed daily.</p>

<p>Periodontal disease and decay are both caused by bacterial plaque. Plaque is a colorless film, which sticks to your teeth at the gum line. Plaque constantly forms on your teeth. By thorough daily brushing and flossing you can remove these germs and help prevent periodontal disease.</p>
<br>

<p>Periodontal diseases can be accelerated by a number of different factors; however, it is mainly caused by the bacteria found in dental plaque, a sticky colorless film that constantly forms on your teeth. If not carefully removed by daily brushing and flossing, plaque hardens into a rough, porous substance known as calculus (or tartar).</p>

<br>


</div>

Answer №1

Could you please enclose the iframe within a div and provide a caption as its sibling?

.iframe-wrap {
float:right;
margin: 15px;
width:180px; 
height:140px;
display: inline-block;
}
iframe { width: 100%; }
.caption { text-align: center; }
<div class="container">

  <div class="iframe-wrap">
   <iframe src="https://embed-fastly.wistia.com/deliveries/7f74ec7de31d90e32a1d465fcebc1d0e12a27d18/file.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <div class="caption">Here goes the caption!</div>
  </div>
  
  <p>Polaroid direct trade 90's migas green juice ugh selvage chambray freegan literally try-hard drinking vinegar franzen church-key dreamcatcher. Air plant selfies waistcoat activated charcoal crucifix literally flexitarian. Blue bottle poke kombucha lyft, shoreditch flexitarian offal 3 wolf moon 8-bit. Sustainable vegan pabst affogato, banjo kombucha poutine direct trade jianbing. Lomo wolf fixie YOLO. Vinyl gochujang freegan synth gluten-free ugh, flexitarian cold-pressed cray offal tote bag.</p>
  <p>Polaroid direct trade 90's migas green juice ugh selvage chambray freegan literally try-hard drinking vinegar franzen church-key dreamcatcher. Air plant selfies waistcoat activated charcoal crucifix literally flexitarian. Blue bottle poke kombucha lyft, shoreditch flexitarian offal 3 wolf moon 8-bit. Sustainable vegan pabst affogato, banjo kombucha poutine direct trade jianbing. Lomo wolf fixie YOLO. Vinyl gochujang freegan synth gluten-free ugh, flexitarian cold-pressed cray offal tote bag.</p>

</div>

Answer №2

To create a full-width iframe positioned in the center, place it inside a row with col-md-12 and use flex to justify it in the center. For the text, enclose it in a div with the class "text-center". Remember to include the following link in your header before proceeding:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">


    <div class = "container">
        <div class="row">
            <div class="col-md-12" style="display:flex; justify-content:center">
                <iframe style = "float:left;margin:5px 25px 0 0;margin-bottom:20px;  width:350px; height:300px;" src="https://embed-fastly.wistia.com/deliveries/7f74ec7de31d90e32a1d465fcebc1d0e12a27d18/file.mp4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
           </div>
       </div>

       <div class="text-center">
           Text content below the iframe goes here
       </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

Encountered a problem when attempting to access an element on a PHP page using

My javascript code is supposed to retrieve information from a specific URL (song.php) which contains the name of a song. However, there seems to be an issue as the javascript is not extracting the required data. Below is the HTML element and javascript fo ...

Troubleshooting issues with CSS fixed and absolute positioning in Chrome

Something strange is happening on my website with the static header bar. It works perfectly everywhere except for one page and only in Chrome. The div with class "top-bar" is set to position: fixed. <header> <div class="top-bar"> & ...

Struggling to modify the page width using CSS and HTML on Wordpress, facing unexpected limitations

I've exhausted all my options. I've attempted to add a certain % page width globally using CSS in the editor, page template, and customizer but it's just not working. It's frustrating because I'm using the Twenty Twenty Two theme, ...

What is the best way to hide the input field when there are multiple parent classes present?

I am currently implementing dynamic fields with jQuery and everything is functioning correctly. The problem arises when I attempt to remove these fields. After searching on Google and browsing past questions on StackOverflow, I noticed that everyone seems ...

How can I expand the notification pop-up in R Shiny?

I'm trying to figure out how to expand the notifications in R Shiny because right now they are cutting off longer error messages. Any suggestions? library(shiny) ui <- fluidPage( actionButton("test", "Test") ) server <- f ...

Modification of webpage content when URL hash changes

I am experiencing an issue with my script. Whenever I type something with a spacebar, like google map, it automatically changes in the input box to google+map, which is not ideal. Additionally, when I try to submit again, it further complicates the situati ...

How to retrieve the primary key of a deserialized object in Django?

I currently have a session storing a list of objects that I need to pass from one view to another. While I know there must be a more efficient way to handle this, that's a problem for another time! To access the list from the session, I use the follo ...

Is there a way to use HTML and JS to draw custom lines connecting elements?

Sorry if this question has been asked before. Is there a way to create straight lines connecting HTML elements with just HTML and JavaScript, without relying on SVG or Canvas? If so, what would be the most effective approach? ...

There seems to be an issue with the AngularJS ng-click function not functioning properly

I'm attempting to insert a link tag with a filter into an HTML content. The HTML content is bound using ng-bind-html and the link tag includes an ng-click directive. However, I'm facing an issue where the ng-click function is not functioning. He ...

Is there an issue with this bootstrap 5.2 tab code?

I am really struggling to figure this out. I've been trying to get bootstrap tabs to work, but for some reason, my custom tabs are not functioning properly. I must be overlooking something very simple: <ul class="nav nav-tabs" id=&quo ...

Error: Attempting to change a read-only property "value"

I am attempting to update the input value, but I keep receiving this error message: TypeError: "setting getter-only property "value" I have created a function in Angular to try and modify the value: modifyValue(searchCenter, centerId){ searchCenter.va ...

Design a custom Bootstrap dropdown using an input[type="text"] element

After exploring the Bootstrap dropdown example here, I realized that for my particular scenario, it would be more beneficial to have an input field (type="text") instead of a button. This way, I can display the selected option from the dropdown. Is there ...

Using HTML div tags to create a looping expression that can interact with Javascript

Currently, I am working on a Ruby on Rails project and I am facing a challenge with looping variables in an HTML form to reduce the amount of manual code I have to write. However, when I attempt to evaluate an expression in the id attribute, the JavaScript ...

Take away the Link Navigation feature for dates on the calendar

I need to eliminate the link associated with the date shown in a SharePoint calendar list. Despite using developer's tools, I cannot locate an anchor tag to disable using CSS. My goal is to accomplish this task solely through CSS. Here is the code sn ...

Updating values in MySQL using PHP requires two consecutive reloads

Hey there! I recently created a message deletion button, but for some reason, it takes two reloads to see the changes pop up. The rest of my code is working fine, so I won't be sharing that part here... <?php while($r = $replies->fet ...

Managing the Navigation Bar

I am currently using Bootstrap and ReactJS, and I am facing an issue where the active tab on the navigation bar does not change when I scroll down the page. At the moment, the active tab only changes when I click on a specific section. Each section corresp ...

iOS displaying CSS Transform issue exclusively

Creating a website that is fully mobile responsive is my goal. However, after designing the header, I realized that it wasn't displaying correctly on IOS devices like my iPad. The "Transform: translateX(-100%);" statement was functional on Android pho ...

"Defining a CSS class specifically for styling the span element nested within an

The HTML structure I am working with is as follows: <p> <a href="#"> <span class = "class-for-span"> SOME TEXT HERE </span> </a> </p> Along with the following CSS: p a{ color: grey; text-decora ...

Unable to establish the characteristic of 'undefined' to null while using React

For my application, I require the following functionality: If a question's value is null, then the checkbox should appear as indeterminate. Otherwise, it should be checked or not-checked accordingly. The issue arises when I try to update the questio ...

Swap out the default white/blank box in Bootstrap

Hello, I am new to using bootstrap and trying to enhance my skills. Currently, I have created 5 boxes - two on the left side and three on the right side. However, I have a few questions regarding their display. Firstly, I notice that box number '5&ap ...