Simple Machines Community Forum

Very simple flex grid for any type of videos or images or whatever comes to mind.

Works fine with portal html pages and I'm sure it will work with the custom action mod.

Demo: https://codepen.io/idesignsmf/pen/YzxgeXJ

For portals, add everything in the block.
For Custom Action Mod, self explanatory.

The CSS:
<style>
.column {
  flex-basis: 100%;
  margin: 5px;
  background: #343436;
}
@media screen and (min-width: 800px) {
  .row {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .column {
    flex: 1;
  }
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

The markup:
<div class="row">
  <div class="column">
    <div class="video-container">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/buzsasTfC4s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div><!-- .video-container -->
   </div><!-- .column -->
   <div class="column">
    <div class="video-container">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/buzsasTfC4s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div><!-- .video-container -->
  </div><!-- .column -->
  <div class="column">
    <div class="video-container">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/W3NTAImpNBQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div><!-- .video-container -->
  </div><!-- .column -->
</div><!-- .row -->

<div class="row">  
  <div class="column">
    <div class="video-container">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/W3NTAImpNBQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div><!-- .video-container -->
  </div><!-- .column -->
  <div class="column">
    <div class="video-container">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/uDwW-De29aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div><!-- .video-container -->
  </div><!-- .column -->
  <div class="column">
    <div class="video-container">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/uDwW-De29aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div><!-- .video-container -->
  </div><!-- .column --> 
</div><!-- .row -->

If you decide to add the CSS to your theme's css file, remove these opening and closing tags in the css code;
<style></style>