Looking for a layout with an image, embedded video, and text all in one row? The responsive website relies on Bootstrap but needs the items in this row to maintain their order without stacking when the page width is decreased.
The issue arises when an image is in the first column and the embedded video in the second column struggles to resize properly as the page width decreases. It seems like when the row height becomes less than the image height, black bars appear above and below the video, distorting its aspect ratio. This problem persists even though the image adapts its height responsively. Fixing the glitch with the embedded video in the second column when the page width is reduced (especially with an image in the first column) is my main concern.
Here's the code snippet:
<html lang="en">
<!-- More code here -->
The challenge seems to revolve around the image in the first column. When I replace the image with text, the embedded video resizes correctly at any window size.
While adding the "img-fluid" class to the image provides it with a responsive height, the video in the second column has issues resizing when the page width is adjusted. Despite trying various percentage-based height adjustments for both the image and its containing div/column, I haven't found a solution yet.
My goal is to set a percentage-based height for the image in the first column relative to its container. The image should have a responsive height, while the embedded video should scale proportionally without distortion or black bars at any page width.
Additionally, instead of an image, there's a possibility of using vertically rotated text in the first column. However, attempting to rotate text within a Bootstrap column has led to alignment complications.