How do you use flexbox on an mp4 file to adjust size relative so that it scales with other items wit-CodePudding

I am trying to have a video next to a paragraph of text side by side so that they both grow and shrink with the browser window size. However, when you decrease the width of the browser window the video retains the same size and squishes all the text down. I am trying to use flex box and setting both children to flex:1 but it won't scale properly.

I am including the HTML code for the section here:

<div >
            <div >
                <div >
                    Come Home to Simple Rick's
                </div>
                <!--Create the content section title-->
                <div >
                    Capturing the sweetest moments into our every wafer. Simple Rick's has become the top selling experience snack in the whole Citadel. Come home to the warm feeling of happiness loved by Ricks and Mortys alike, come home to Simple Rick's.
                </div>
                <button >Order Now</button>
                <!--Add an order now button-->
            </div>
            <video  controls>
                <source src="./media/Simple-Rick's-Ad.mp4" type="video/mp4">
                Your browser does not support the video tag.
            </video>
                <!--Display an mp4 video ad with controls-->
        </div>

and the CSS code:

.content1 {
    padding: 60px 120px 100px 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content1 .left {
    max-width: 500px;
    flex: 1;
}

.content1 .button {
    margin-top: 12px;
}

.video {
    max-width: 500px;
    margin: 0 50px;
    vertical-align: center;
    flex: 1;
}

Ideally both the video and the items within the container can scale in the same proportions.

CodePudding user response：

The reason why this happens is because the max-width property on the .video class keeps the video the same size regardless of the window size, so the text gets squished.

You can do the following:

.video {
    max-width: 40%;
    margin: 0 50px;
    vertical-align: center;
    flex: 1;
}

You can change the percentage value for max-width so it's to your liking. This makes the video size scale based on the size of its parent container, which will prevent it from taking up too much space within the parent and squishing the text.

CodePudding user response：

You could also use float instead

.content1 {
  padding: 60px 120px 100px 120px;
  height: 100%;
  min-height: 100%;
  position: relative;
}

.content1 .left {
  float: left;
  width: 50%;
  max-width: 500px
}

.content1 .right {
  float: right;
  width: 40%;
}

.content1 .button {
  margin-top: 12px;
}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 25px;
  height: 0;
}

.videoWrapper .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: auto;
}

<div >
  <div >
    <div >
      Come Home to Simple Rick's
    </div>
    <!--Create the content section title-->
    <div >
      Capturing the sweetest moments into our every wafer. Simple Rick's has become the top selling experience snack in the whole Citadel. Come home to the warm feeling of happiness loved by Ricks and Mortys alike, come home to Simple Rick's.
    </div>
    <button >Order Now</button>
    <!--Add an order now button-->
  </div>
  <div >
    <div >
      <video  controls>
            <source src="./media/Simple-Rick's-Ad.mp4" type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
  </div>
  <!--Display an mp4 video ad with controls-->
</div>