How to align Vimeo embed to the left side

Is there a way to align a Vimeo iFrame to the left instead of it automatically centering itself? I want more control over its alignment within my flexbox container.

I've created a Flexbox container named .example-div with two internal flex containers. The first one, .player-div, contains the default Vimeo iFrame player while the second will hold credits information. However, I'm having trouble justifying the iframe to the left.

HTML

<div class="example-div">
  <div class="player-div">
    <iframe src="https://player.vimeo.com/video/142760309" frameborder="0" width="100%" allow="autoplay; fullscreen" allowfullscreen></iframe>
  </div>
  <div class="credits-div">
  </div>
</div>

CSS

body {
  margin: 0;
}

.example-div {
  height: 100vh;
  display: flex;
}

.player-div {
  background-color: orange;
  width: 80vw;
}

.credits-div {
  background-color: green;
  width: 20vw;
}

.player-div iframe, .player-div object, .player-div embed {
    width: 100%;
    height: 100%;
}

https://codepen.io/czeins/pen/dxJywB

Answer №1

It seems like the issue you're facing is occurring outside of the iframe code. Flex-box does not directly respond to changes in width. When working with a display:flex container, it's important to utilize properties like min, max, or flex-basis for setting sizing... You can find more information in these resources.

In essence, your flexbox CSS structure should resemble the following:

.example-div {
  height: 100vh;
  display: flex;
  justify-content: space-between; // positions items to each side
}

.player-div {
  background-color: orange;
  flex-basis: 80%;
}

.credits-div {
  background-color: green;
  flex-basis: 20%;
}

An iFrame with a width:100% will now fill the flex container. However, there may be complications due to varying aspect ratios when dealing with videos at full width.

To address this issue effectively, you'll need to set the height of the iFrame accordingly. This process becomes slightly tricky as the video's height is dependent on the dynamic width of the container. For instance, a standard widescreen video has a 16:9 ratio (units wide by units high), meaning the height must adjust proportionally to match any width adjustments.

A straightforward solution involves creating an additional container, such as a div within the flex-container, and employing absolute positioning alongside padding to ensure the proper sizing of the video.

For a detailed explanation of this technique, check out this guide and see it in action through this interactive example.

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

Tips for making text flow around an image

How can I achieve a design where the text wraps around an image positioned in the bottom right corner? [Image Removed by Owner] Your guidance on implementing this effect is greatly appreciated. Thank you. ...

Animating Divs with jQuery to Expand their Size

I am currently designing a services page for my portfolio website. The layout consists of three columns, with the central column containing a large box and the left and right columns each containing three smaller boxes. These smaller boxes function as clic ...

My mobile website, built using Bootstrap, appears as if it is zoomed

I recently launched a website called dekhbehen.com, where users can download wallpapers and generate memes. One issue I have encountered is that when the site is accessed via smartphone, it appears zoomed out. You can visit the specific URL causing this ...

Could anyone provide some insight into the reason behind this occurrence?

I just came across the most peculiar situation I've ever experienced. Check out this unique test page: <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script language=javascript> fun ...

Keeping the scroll in place on a Bootstrap4 modal while scrolling through content that is already at the top

On my Bootstrap 4 modal, I have encountered an issue with scrollable content. When I am at the top of the content and try to scroll downwards, nothing happens because I am already at the top. However, if I continue to hold the touch without releasing it, t ...

"Step-by-step guide on creating a dynamic clipping mask animation triggered by mouse wheel

I have developed a sample that functions just as I envision my final outcome to function, with the exception of triggering on mouse-over. Instead, I would like it to activate as a page transition when scrolling with the mouse. (move your cursor over the i ...

Verify if all the words commence with a certain character using regular expressions

I am working on form validation using Angular, and I am trying to verify if all words in a string start with the letter 'Z'. I am implementing this using a pattern so that I can dynamically change the input's class. So far, this is what I h ...

jQuery mobile enhancing user experience with dynamic background images

I am having trouble setting different background images for each page in jQuery Mobile. <div data-role="page" id="pageone">... </div> <div data-role="page" id="pagetwo">... </div> Since each page has a unique ID, I tried ...

Add a style to every div except for the final one

I've attempted to add a unique style to all divs with the same class within a parent div, except for the last one. Strangely, my code doesn't seem to work as expected for this particular case. Can anyone spot what I might be overlooking? Right no ...

Implement Angular backend API on Azure Cloud Platform

I successfully created a backend API that connects to SQL and is hosted on my Azure account. However, I am unsure of the steps needed to deploy this API on Azure and make it accessible so that I can connect my Angular app to its URL instead of using loca ...

Viewing a Google Charts graph upon the loading of a web page

Utilizing the Google Charts library, I have incorporated a graphic on my web page that is dynamically added using AJAX into a <div> element. To display the graph when the page loads, I have written the following code: <script type="text/ ...

Create a new NVD3 graph with a vertical line added

I am working with a NVD3 graph that displays a simple data set. My goal is to draw a line over the graph in a different color (similar to a cut-off value, which will be at x=5) <meta http-equiv="content-type" content="text/html; charset=UTF8"> <s ...

Choosing multiple options in a select tag leads to an error

I am facing an issue with my array and select multiple fields. I want all the select options to be automatically selected using the array ID when the file is loaded. Here is my array: Array( [0] => 3 [1] => 5 [2] => 9 ) This is what my select ...

Creating a hover effect on a specific area of a map is a useful technique

Can someone please help me create a hover effect for areas in maps? Below is the code for the map. Thank you in advance! Here is the image. <img src="[CR_kraje_1_úroveň_v1] (imported)" width="770" height="443" border="0" usemap="#map" /> &l ...

Ensure that only one button from the collection is activated

One of the features on my website includes 3 blocks with buttons. These buttons trigger a change in the displayed picture when clicked. However, it is crucial to ensure that when a new track is activated, the previous button returns to its original state. ...

Displaying elements above my React sidebar

I am working on developing a Login application with a landing page using React Router and Redux. In order to have a Sidebar that is always present in all the components within the application, I have setup the Sidebar component as a route that is constantl ...

Is it possible to use window.print() to print the entire contents of a DIV with both horizontal and vertical scroll bars?

In my code, I have a div that contains both horizontal and vertical scrollers. Whenever I try to print the content inside this div using the window.print() method, it only prints the visible portion of the div. Here is the code snippet that I have attempte ...

Angular 8 form controls becoming unresponsive while the list is being loaded

Hello, I am currently experiencing an issue in Angular. I have a page with a basic Angular form and two independent components that load lists from an API (comments with 500+ records and posts with 500+ records). The Problem: While trying to enter values ...

Align text vertically within a link box by overriding inherited CSS styles

Fiddle: http://jsfiddle.net/jgallaway81/ax9wh/ <a href="lcars.jfx.php" class="leftbuttons buttonlinks antibutton"> LCARS Locomotive O.S. </a> My issue pertains to the alignment of text within a graphic. I am utilizing this particular button ...

Prevent the rendering of HTML in the combobox dropdown menu

Utilizing ExtJs 3.1 In my Ext.form.ComboBox, the store includes values such as: "value1", "<value2>", "value3". The issue arises when the combobox dropdown list is displayed, and "<value2>" is being interpreted as an HTML tag. This is causing ...