Embedding youtube videos or other content with a responsive grid layout : Is that possible ?

[healiseu]

Hi Michael,

is there a quick way to embed two, three or more youtube videos in a row, i.e. next to each other. I noticed that you have built something similar for the figures with the <figure class="third">.....</figure>. I have also tried to use <div class="grid__wrapper"> without any luck. There is also a group-by-array include file that allows an object to be grouped by an array. It has been used in categories and tags archive lists but I don't know if and how it is possible to make it work with youtube embedded videos.

Could you please help with this feature ?

Thank you

[mmistakes]

Not really. You'll need to add some custom CSS to do this. The group by array include has nothing to do with this... it's purely styling.

YouTube video embeds use the <iframe> element. So you'd need to style them similar to how I've styled <img> inside of a <figure> element.. giving them a width, floating to the left, etc. so they align next to each other and fit inside of their parent container.

You could try adding iframe to .half and .third and rebuild the theme's stylesheet and see if that works. Might need some further styling to fine tune things.

  &.half {
    > a,
    > img,
    > iframe {
...
}

  &.third {
    > a,
    > img,
    > iframe {
...
}

[healiseu]

Generally speaking I am in a process of porting my healis.eu site from the Phlow feeling-responsive theme. In my opinion your theme is far more suitable and compatible to store on github and the overal style and appearence is better too.

Nevertheless, one of the things I am greatly missing is the easy of use and the power of a grid system that is based on Zurb Foundation Grid component. It is super easy to construct a grid layout and fill it with any type of content you like. I recommend you adopt a similar solution for your theme.

Anyway that is just a suggestion for further enhancements. There are other nice features I am missing from feeling-responsive. I will try to see how I can replace them with features of your theme.

Thank you again for your prompt support and quick reply.

[mmistakes]

Minimal Mistakes uses Susy to build any sort of grid system you want. It's way more powerful and bespoke than an off the shelf an opinionated framework like Bootstrap or Foundation. My intention wasn't to make yet another Jekyll theme that uses those frameworks.

You're right it doesn't come with predefined classes to set column widths. I prefer semantic grids that don't liter up your HTML markup with things like class="col-4-sm" or class="large-6 columns". With a little work you can do something similar with Susy and building out the stylesheet to suit your own needs.

I've tried to make things as extensible as I could so people could fill in any gaps that they need. Rather than bloating it with things most won't use.

[healiseu]

Susy, tastes great, this is good to know ;-) I cannot consider myself an experienced web developer, neither I have time to dig deep enough. I have already spent a week to absorb the details of your theme. I do not regret this, I just hope I will be rewarded with a beautiful result and full control of my web site at the end.

As a user of your theme I would expect a demo on constructing a grid like the one I referenced in my previous comment. But for now, I have followed your advice. I managed to update first my npm, node, not an easy task, then I rebuilt the theme's style-sheet successfully. I have committed the changes and you can view my updated version of _base.scss. I tried to test it with this post but although it does something, videos are not aligned in a row. The raw content of the post is here

Any ideas how I can fix this, since I reached that far ? Thank you

[mmistakes]

Probably out of the scope of what I can help with. You're venturing into the fun and exciting world of web development and questions of that nature are best asked on sites like Stackoverflow.

To get you started it's has something to do with the FitVid.js script the theme uses to make videos responsive. If you inspect the elements with your browser's web developer tools you'll see it's wrapping the <iframe>s so it can apply some styling. That's making them have a width of 100% which is obviously not what you're trying to achieve.

You could disable the script and see if that works for you. That would require doing a similar thing with npm and pulling out the FitVid specific stuff.

A low-tech solution would be to place the videos in a <table> with however many columns you want and set the widths on the td. Problem with this approach is it's not responsive so it'll likely look awful on small screens when it tries to squish 3 videos together in a row.

[healiseu]

OK, I worked a bit more on the solution you suggested, I commented out the FitVids function in _main.js then rebuit with npm run build:js no need to remove completely jquery.fitvids.js and modify the "uglify" of package.json.

The other file that was modified is the _base.scss. The iframe was added to .half and .third as you suggested above.

The code to achieve a responsive grid layout for youtube videos is :

<figure class="third">
  <iframe
    src="http://www.youtube.com/embed/dhAQB44QQZg"
    frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
  </iframe>
  <iframe
    src="http://www.youtube.com/embed/0zqYT7C7OXI"
    frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
  </iframe>
  <iframe
    src="http://www.youtube.com/embed/kewwVdJpzSY"
    frameborder="0" webkitAllowFullScreen mozallowfullscreen>
  </iframe>
</figure>

<figure class="half">
  <iframe
    src="https://www.youtube.com/embed/LbAwuEZNNms"
    frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
  </iframe>
  <iframe
    src="https://www.youtube.com/embed/7qWokWCfqdo"
    frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
  </iframe>
</figure>

I have to admit that your solution is more elegant and clean although it is not generic as the one adopted in feeling-responsive theme, i.e. specifying rows and columns for the grid (see next comment). This is a screen capture using both third and half classes taken from a window 710 pixels wide.

[healiseu]

I am stopping here. For a comparison purpose, I am posting a screen capture of how this looked like on the Phlow feeling-responsive theme. The captured image displays a 3rows x 2columns grid taken from a window 730pixels wide. I have put also the code in case you or someone else might decide to enhance your theme with a similar functionality in the near future.

For a start the <figure> tag will have to be renamed to something more generic e.g. gridRow and the class="half" will have to be replaced with the number of elements that are next to each other in a row, i.e. 2,3,4,.. Then you repeat the gridRow to get the full grid. One can build on top of this methods to avoid repetition if the element content is the same, like your gallery module....

<!-- Set a 3rows x 2columns Grid, i.e. 2columns x 6width = 12  -->
<div class="row t60">
  <!-- First Row -->
    <div class="medium-6 columns b30"><div class="flex-video widescreen vimeo">
      <iframe
        src="http://www.youtube.com/embed/dhAQB44QQZg"
        frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
      </iframe>
    </div></div>

    <!-- Leave this cell empty -->
    <div class="medium-6 columns b30"><div class="flex-video widescreen vimeo">
      <iframe        
        frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
      </iframe>
    </div></div>
  <!-- End of First Row -->

  <!--Second Row -->
    <div class="medium-6 columns b30"><div class="flex-video widescreen vimeo">
      <iframe
        src="http://www.youtube.com/embed/0zqYT7C7OXI"
        frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
      </iframe>
    </div></div>

    <div class="medium-6 columns b30"><div class="flex-video widescreen vimeo">
      <iframe
        src="http://www.youtube.com/embed/kewwVdJpzSY"
        frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
      </iframe>
    </div></div>
  <!-- End of Second Row -->

  <!-- Third Row -->
    <div class="medium-6 columns b30"><div class="flex-video widescreen vimeo">
      <iframe
        src="https://www.youtube.com/embed/LbAwuEZNNms"
        frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
      </iframe>
    </div></div>

    <div class="medium-6 columns b30"><div class="flex-video widescreen vimeo">
      <iframe
        src="https://www.youtube.com/embed/7qWokWCfqdo"
        frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>
      </iframe>
    </div></div>
  <!-- End of Third Row -->
</div> <!-- End of Grid -->