Menu icon Foundation
Help with Data Equalizer, then FlexVideo

Just when I think I understand how things should work, this kind of stuff happens.  I have the data-equalizer part working on my site, but I can't get it working on CodePen to show you the issue I am having with FlexVideo.  Ugh!

First off, here is the link to the CodePen I tried to reproduce the issue on:

https://codepen.io/mdbarthel/pen/JJGaqy

If you can figure out why the data-equalizer is not working, please let me know.

 

I guess I can show the FlexVideo issue I am having in a screenshot.

Screenshot

The issue is that I would like to contain the video player.  I do NOT want the controls to come out of the video and I do NOT want the background to be black.

Any idea how to accomplish this?  The row represented in the CodPen link is what is shown in the screenshot.

 

Thanks!

foundation 6data-equalizerFlexVideovimeo

Just when I think I understand how things should work, this kind of stuff happens.  I have the data-equalizer part working on my site, but I can't get it working on CodePen to show you the issue I am having with FlexVideo.  Ugh!

First off, here is the link to the CodePen I tried to reproduce the issue on:

https://codepen.io/mdbarthel/pen/JJGaqy

If you can figure out why the data-equalizer is not working, please let me know.

 

I guess I can show the FlexVideo issue I am having in a screenshot.

Screenshot

The issue is that I would like to contain the video player.  I do NOT want the controls to come out of the video and I do NOT want the background to be black.

Any idea how to accomplish this?  The row represented in the CodPen link is what is shown in the screenshot.

 

Thanks!

Rafi Benkual over 2 years ago

Couple things, you have a .column as a direct child of a .column so that will cause irregular padding. Not sure if the inline styles are for demo only, but those can cause issue. Here is a pen of equalizer working with your code (i made some adjustments) https://codepen.io/rafibomb/pen/MoeXyg?editors=1000

 

One thing i see missing off the bat is the JS initialization.

Adding this will help :)

Michael Barthel over 2 years ago

Rafi, thanks for helping me with that data-equalizer issue.  I was banging my head against the wall.  Now I completely understand. I keep learning every day.

Any idea how to get rid of the black filler space behind the video in my screenshot?  If I put it in another container to constrain it, it will either need dimensions or percentages.  Given that the size of the column changes so much, I can't really use a px dimension, and percentages won't be much better.  Sometimes the space is wider than the video and sometimes it is taller, resulting in that black background.

 

Michael Barthel over 2 years ago

The page in question is now live.  You can see what I mean about the black behind the video.

http://www.westernwashingtonhondadealers.com/one-tank-trips

It works, but it would look much cleaner without the black (in page widths between 1024 and 1320).

 

Thanks again!