• Welcome to Simple Machines Community Forum. Please login or sign up.
January 17, 2022, 12:31:37 AM

News:

Want to get involved in developing SMF, then why not lend a hand on our github!


Simple Responsive YouTube Videos w/ Flex Grid

Started by Mick., December 03, 2021, 05:39:42 PM

Previous topic - Next topic

Mick.

December 03, 2021, 05:39:42 PM Last Edit: December 04, 2021, 10:31:02 AM by Mick.
You cannot see attachments on this board.

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>

Advertisement: