Display multiple videos next to and below one another in a responsive layout

I am attempting to display multiple Vimeo videos responsively alongside and below each other. I have noticed that when using the embed-responsive feature, the videos may not align perfectly if different videos are used. However, they align perfectly when the same video is used in all instances.

![here a screenshot of the videos not aligning ]1

Here is the code snippet:

<section id="gallery">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/209390725" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/152162621" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/150922044" allowfullscreen></iframe>
        </div>
      </div>
      <div class="col-md-6 col-sm-6 col-xs-12 gallery">
        <div class="embed-responsive embed-responsive-16by9">
          <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/209398590" allowfullscreen></iframe>
        </div>
      </div>
    </div>
  </div>
</section>

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-4

Answer №1

Give this a go in your CSS file

iframe[src*=vimeo] {
    width: 100%;
    max-height: 300px;
    height: 100%;
}

This code snippet will adjust the size of all vimeo embedded videos.

Answer №2

The issue lies not in bootstrap, but rather in the varied sizes of the embedded videos. Before using them, it's important to customize each video size as detailed in this post.

There are some concerns regarding the classes being utilized.

  1. Bootstrap-4 has eliminated all *-xs-* classes. Therefore, col-xs-12 no longer exists in the current version of bootstrap. It is recommended to use col-12 instead.
  2. With screens wider than 576px, simply utilize col-sm-6 as it will cover all necessary widths.

<div class="col-sm-6 col-12 gallery">

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

Enhancing Bootstrap modals with dynamic content and integrating Ajax for dynamic data retrieval in Laravel

I am facing some challenges while coding in Laravel, specifically with passing data to a modal (using the Bootstrap framework) and sending data to an Ajax post request. I have an array of items with an 'id', a 'name', and 'content& ...

javascriptphpajaxtwitter-bootstraplaravel

Tips for creating boxes with clearly defined edges on shared sides using three.js

When I draw boxes with common sides, I don't see the common edges, but rather perceive them as a single object even though there are 25 boxes: https://i.sstatic.net/gE8FW.png function box(scene, x, y, z, size) { const points = []; ...

javascripthtmlthree.js

A loop that incorporates a jQuery JavaScript dropdown menu along with some calculations

My goal is to have multiple dropdown lists populated from a PHP while loop. Each select dropdown has a corresponding textbox that should update its value when a selection is made. However, the current script only works for a single dropdown outside of the ...

javascriptphpjqueryhtml

Remove the scrollbar from the iframe and instead display a scrollbar on the page in its place

Currently, I am facing an issue with the vertical scrollbar on an iframe. I want to remove it so that the scrollbar appears on the main page instead. This way, I will be able to scroll the content of the iframe using the page's scrollbar. I managed to ...

javascriptjquerycssiframescrollbar

Getting rid of excess space surrounding text

Within my div, I am attempting to create a 5px padding around the text; however, there seems to be additional spacing that is interfering with my desired layout. It almost feels as though my browser is mocking my efforts by refusing to cooperate. This is ...

css

issue with jQuery not properly selecting options based on text

I have three select elements in my code, each containing 3 or 4 options. An "Apply All" button is placed on the first file row. When a user selects a sheet name on the first file and clicks the Apply All button, it should automatically select the same she ...

javascriptjqueryhtml

Issue with uploading files in Internet Explorer using Ajax not resolved

I've been encountering an issue while uploading images using Ajax and PHP. Surprisingly, everything runs smoothly on Firefox but fails to work on Internet Explorer (I.E). Take a look at my HTML code below: <!doctype html> <head> <titl ...

phphtmlajaxinternet-explorerfile-upload

Tips for inserting PHP information into the <link rel="stylesheet" type="text/css" href="CSS/sheet.css" /> reference tag

In my script, I have successfully implemented a feature that displays the OS and browser details. The output is in the form of eight CSS scripts, showcasing Mac, PC, and Ubuntu OS's with IE, Firefox, Safari, and Chrome browsers. While the script is st ...

phpcssxhtmlmysqli

Insert HTML code that is activated when the selection is modified

I have a simple dropdown menu in my HTML code. HTML <select name="breed" onchange="breedChanged()"> <?php while ($row = gdrcd_query($result, 'fetch')){ ?> <option value="<?php echo $row['id_breed']; ?& ...

javascripthtml

The image tag in HTML is unable to display as an image within the jQuery object

After converting the object "suggestion" to a string, I have data stored in the "sugestion" variable like this: {"value":"<img src=\"http://localhost/erp/assets/images/product/123.jpg\"> 123123123 t-shirt","data":"ABC098765"} Unfortunatel ...

javascriptjqueryhtmlcssimage

Incorporate SVG or HTML5 elements into a Box2D World

My SVG logo is primarily composed of elements. I am interested in animating it by placing it in a "gravity world". Although I am new to Box2D and Canvas, I have managed to convert my SVG into HTML5 canvas using canvg. Currently, I am going through the begi ...

htmlanimationsvgbox2dgravity

Deciphering HTML with AngularJS

We are currently working with AngularJS version 1.5.6 and facing an issue with HTML characters not being displayed correctly in our text. Despite trying various solutions, we have been unsuccessful in resolving this issue. We have explored numerous discuss ...

javascripthtmlangularjsdecode

Tips for changing the color of hyperlink text without underlining it on hover

I have a menu set up on my website that currently underlines when hovered over. However, I would like it to change color instead, which is the default style for my Wordpress theme. The title, "BOLI STYLUS," changes color exactly as I want it to. Below is ...

htmlcsswordpress-theming

Trigger bootstrap dropdown when input is clicked

One of the challenges I'm facing is getting a Bootstrap 4 dropdown to open when a user tabs to it for ADA accessibility. Currently, clicking on the input triggers the dropdown to show, but I need it to work with tabbing as well. Using a focus event a ...

javascriptjquerybackbone.jsbootstrap-4backbone-views

Tips for increasing the dimensions of a modal in Bootstrap

<div class="popup zoom" id="_consultant"> <div class="popup-window " > <div class="popup-content" style="background-color:#F5F5F5" > </div> </div> </div> After extensive research, I have not found ...

csstwitter-bootstrap-3

Methods for transferring data to controller in Angular Modal service

After implementing the angular modal service discussed in this article: app.service('modalService', ['$modal', function ($modal) { var modalDefaults = { backdrop: true, keyboard: true, m ...

javascriptangularjstwitter-bootstrap

Manipulating Div Content with JQuery Based on Checkbox Selections

My goal is to extract content from a hidden div that contains an unordered list with specific classes and move certain list elements into placeholder divs based on checkbox values. Initially, when no checkboxes are checked, I want all list elements in the ...

jquerycsscheckbox

What are some methods for toggling text visibility in PHP?

I am facing confusion regarding the functionality of this code. Here is the snippet in question : //start date to end date <?php if($show5 < $show6) { ?> <a>show content</a> <?php }?> If both 'start da ...

phphtmlcss

Form Validation Issues Detected

Could someone help explain why the code below is causing an error according to W3C guidelines: <form id="" method="post" action="" /> <input type="text" name="" title="" tabindex="10" class="" /> <inp ...

phphtmlcss

`The activation of Bootstrap list items through embedded spans`

Apologies for the title, I couldn't think of a better way to explain my issue. I have a list-group and I want the buttons to display a specific color when active. However, it seems that the embedded spans are capturing the click event and not registe ...

javascriptjqueryhtmlcsstwitter-bootstrap