Struggling to create responsive embedded videos?

I have successfully created a responsive video, but there seems to be an issue with the width to height ratio when the browser is fully stretched. The iframe appears narrow and tall in this situation. However, when the browser is resized and the video moves below the text, the ratio corrects itself. How can I ensure that the ratio remains consistent in the stretched browser? Here is the code I am using:

.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}

.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
<section class="section1">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 section1Text">
        <h2 class="text-center">What We Have to Offer</h2>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p>
      </div>
      <div class="video-responsive">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/bsY2GdBEvSA?showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</section>

htmlcss

Answer №1

I'm interested in learning how to align a video next to text on the right within the same row.

You can achieve this layout by adding display: flex; to your row class div and setting the flex-direction to row.

How can I maintain the aspect ratio of the video when resizing the browser window?

EDIT:
For filling the container while preserving the dimensions of your iframe, use display: flex on the .video-responsive div and set flex-basis: 100%; on the iframe:

.row {
  display: flex;
  flex-direction: row;
  background: hotpink;
}

.video-responsive {
  flex-basis: 50%;
  min-height: 100vh;
  display: flex;
  background: teal;
}

.video-responsive iframe {
  flex-basis: 100%;
}

.section1Text {
  flex-basis: 50%;
}
<section class="section1">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 section1Text">
        <h2 class="text-center">What We Have to Offer</h2>
        <p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel massa iaculis, posuere augue et, pharetra ipsum. Suspendisse metus ex, pellentesque id dolor in, vehicula varius tortor. Nam auctor ante nisi.</p>
      </div>
      <div class="video-responsive">
        <iframe src="https://www.youtube.com/embed/bsY2GdBEvSA?showinfo=0" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>
  </div>
</section>
Note that the video dimensions have been removed from the HTML for reference purposes.

Here is a comprehensive guide to CSS Flexbox.

Hope that helps clarify things :)

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

Choosing <label> elements, while disregarding those <label> elements that include <input>

I need assistance with CSS rules to target only <label> elements that do not contain an <input> field inside of them. Is there a specific rule I can use for this? <label for="type">Regular Label</label> <label for="type"> ...

css

Efficiently shrink column width in Material-UI's <TableRow/> using ReactJS and Material-UI

At the moment, I am utilizing ReactJS along with Material-UI. One issue I am encountering is that when using Material-UI's <Table>, the columns' width are automatically set based on content which results in all columns having equal width. H ...

javascripthtmlcssreactjsmaterial-ui

On one webpage, IE 11 is correctly styling certain visited hyperlinks while failing to do so for others

Although I acknowledge that others have asked similar questions, none seem to address the exact issue I am facing, nor do they offer practical solutions or clear explanations. Issue I'm encountering a problem where some visited hyperlinks in IE 11 f ...

cssinternet-explorerhyperlinkcache-controlvisited

Implementing multiple content changes in a span using javascript

Having an issue with a pause button where the icon should change on click between play and pause icons. Initially, the first click successfully changes the icon from a play arrow to a pause icon, but it only changes once. It seems like the else part of the ...

javascripthtml

Display a div using Jquery depending on the visibility and checked value of another div

Trying to toggle the visibility of a div based on another div's input has proven to be quite challenging in this scenario. Here is the HTML setup: <div id="main-question"> <div class="form-group"> <div class="form-radios"> ...

jquerycss

HTML form submission with a grid of multiple choice options

I have created my own multiple choice grid: <div style="overflow-x:auto;"> <table class="w-100"> <tr> <td class="border"></td> <td class="border">Yes</td> <td class="border">No</ ...

javascripthtmljquery

Create beautiful HTML forms with Laravel Collective Forms in Laravel 5.7

I am currently using the Laravel Collective form code shown below: {!! Form::open(['action' => ['CategoryController@sub8', $item1->id], 'method' => 'post']) !!} {{Form::label('postaladdress', &apos ...

phphtmllaravelforms

Tips for adjusting the size of icons in Ionic Framework v4 and Angular 7

The library ngx-skycons offers a variety of icons for use in projects. If you're interested, check out the demo here. I'm currently incorporating this icon library into an Ionic project that utilizes Angular. While the icons work perfectly, I&ap ...

cssangulartypescriptionic-frameworkicons

Difficulties encountered with CSS transitions when using the background

I stumbled upon some interesting examples on Stack Overflow about the fade effect on link hover. Curious, I decided to try it out myself and created this JSFiddle. <div class="fade"/> .fade { -o-transition: 0.3s; -moz-transition: 0.3s; -khtml-tran ...

htmlcssfirefoxcss-transitions

The image on Bootstrap isn't showing up

Can someone please help me troubleshoot why my logo image is not showing up? I can't figure out why the min and max width/height parameters are not working as intended. Here is my HTML: <div class="container-fluid"> <div class="head"> ...

htmlcsstwitter-bootstrap

What is the best way to save a PDF from within a frame using JavaScript and an HTML5 <embed> tag?

I'm looking for assistance with a script for my website that dynamically generates a PDF after the user makes selections in one of the frames. The website uses the HTML5 tag to display the PDF file. Can anyone provide guidance on a script that can: ...

javascriptioshtmlpdf

FlexNav excluding

I have implemented FlexNav for my website navigation. The demo I used sets the width of top-level menu items to 20%, which works well with five menu items. .flexnav li { . . . width: 20%; } However, in my menu, the text lengths of the top ...

javascriptjquerycss

Enhance user experience with jQuery UI sortable and the ability to edit content in real

I am facing an issue with jquery sortable and contenteditable. The problem arises when I try to use jquery sortable along with contenteditable, as the contenteditable feature stops working. After searching on Stack Overflow, I found a solution. However, up ...

javascriptjqueryhtmljquery-uicontenteditable

Creating a Conditional Structure in HTML: A Step-by-Step Guide

My website is in need of a form that can identify the user's role based on their name input. This feature is essential for individuals with private roles. Is it possible to achieve this using HTML alone, without relying on JavaScript? If not, what st ...

html

Styling with CSS to ensure divs are displayed in two rows

Check out this example I found: https://jsfiddle.net/n3qs0wke/ .wrapper { max-width: 600px; border: 1px solid #333; } .big-div { min-width: 212px; min-height: 212px; max-width: 212px; max-height: 212px; display: inline-flex; ...

htmlcss

Apply a chosen style to the element that was clicked on, while removing the style from the rest

Here is an example of my ul li structure: <div id="categoryTree"> <ul> <li id="cat_15"> <a class="hasSubCat" href="javascript:void(0);"><img src="images/icons/folder.gif" border="0" alt="Folder" title=" Folder ">N ...

javascriptjqueryhtmlcss

Transferring information via Segments in Ionic 3

I'm facing a challenge where I need to transfer a single ion-card from the "drafts" segment to the "sent" segment by simply clicking a button. However, I am unsure of how to achieve this task seamlessly. Check out this image for reference. ...

htmltypescriptionic-frameworkionic2ionic3

The minmax() function in a responsive grid layout does not function properly when incorporating grid areas

My Vision for the Layout I am striving to create a dynamic grid structure with three columns and two rows, where the third column spans both rows and features an image. This layout should adjust itself based on the device screen size: Specifically, I wou ...

csslayoutresponsive-designcss-grid

A step-by-step guide to creating a CSS menu using pure HTML markup

I have been working on the CSS for a menu using some HTML code, but I am stuck and uncertain about my next steps. Here is the CSS I have added so far: #menu-my-integra, ul.sub-menu { list-style: none; padding: 0; margin: 0; } #menu-my-integra li ...

htmlcss

What is the process for eliminating the hover effect on a Bootstrap button?

I have customized a Bootstrap button in my stylesheet to make it dark, but it still has a hover effect from Bootstrap that I want to remove. How can I get rid of this hover effect? Take a look at the code snippet below for reference: .btn-dark { min-w ...

htmlcsstwitter-bootstrap-3