News:

SMF 2.1.2 has been released! Take it for a spin! Read more.

Main Menu

Simple Responsive YouTube Videos w/ Flex Grid

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

Previous topic - Next topic

Mick.

You cannot view this attachment.

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: