• Welcome to Simple Machines Community Forum. Please login or sign up.
December 06, 2021, 08:02:42 PM

News:

Bored?  Looking to kill some time?  Want to chat with other SMF users?  Join us in IRC chat or Discord


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: