I'd like to place two videos horizontally.

Asked 1 weeks ago, Updated 1 weeks ago, 1 views

http://ayoba.co.kr/archive/lab/ on this website I want to place the video horizontally like that I don't know how to do it. I would appreciate it if you could let me know.

//<div style="padding: 56.25% 00; position: relative;"><iframe style="position: absolute; top: 0; left: 50% width: 50%; height="screen": https://player.vimeo.com/video/690783493"
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>
</iframe></div>

css

2022-09-20 10:28

1 Answers

You just gave me 50% width height in iframe's inline style, which is not the right way to resize while maintaining the iframe's screen ratio. position: absolute is also required to maintain the screen ratio of iframe, but 'width height 100%' is also required. Then the iframe, forced to fill in the 16:9 ratio square, resulting in a 16:9 ratio iframe.

So what you have to do is create divs that surround those iframes and place them horizontally. What comes to mind right now is display: table-cell. If you go into the demo below, you'll see that the core structure is like this.

DEMO: https://codepen.io/yuptogun/pen/jOZqOPL

<div class="item-wrapper">
  <div class="item">
    <div class="iframe-wrapper">
      <iframe><!-- omitted --></iframe>
    </div>
  </div>
  <div class="item">
    <div class="iframe-wrapper">
      <iframe><!-- omitted --></iframe>
    </div>
  </div>
  <!-- You can make another copy of div.item -->
</div>
<!-- You can make another copy of the div.item-wrapper -->

Do research!


2022-09-20 10:28

If you have any answers or tips


© 2022 pinfo. All rights reserved.