Looks like 3 Column set up is needed

[codeispoetry]

I am actually able to create a set-up that looks like this. But my mentors(@coothead and @PaulOB ) have told me that structure is not so good.

So I am looking for an advice that what could be the best approach to create such things. Keeping in mind that in low width that vertical scroll in the right needs to be changed to horizontal scroll.

Should we create three flex columns where the leftmost should be given a fixed width and the rightmost should be given a fix-width and the remaining width should be given to the Iframe i.e. Youtube/Vimeo videos.

Or Maybe some different approach like block model etc.

[coothead]

Hi there codeispoetry,

as I pointed out, the problem with using “Wordpress”
is that it interferes with any code that you try to add.

The attachment show an example that attempts to nullify
it’s effects as much as possible.

remove-wordpress-from-inserted-code.zip (13.9 KB)

coothead

[PaulOB]

This is just a quick 10 minute mock up and needs refinement but I would be looking at something like this:

(View on codepen to see full effect)

It assumes that the video height is the controlling factor in the height of all 3 blocks and that the video should scale and maintain its intrinsic aspect ratio also.

Its not meant to be the one and only solution but a starting point for discussion and refinement

Obviously @coothead 's concerns with wordpress etc need to be taken into account as I have ignored any extraneous code from the demo.

[codeispoetry]

@PaulOB

It’s not meant to be the one and only solution but a starting point for discussion and refinement

Ok, thanks. Would it be possible if someone else can have their insight further?

align-self: flex-end →

Currently, This is used, but in order to put that Vertical “Video” in the vertical middle I think we have to change this to →

`align-self: center;`

But actually, it didn’t work. I used justify-content property also.

[PaulOB]

@codeispoetry

But actually, it didn’t work. I used justify-content property als

It does work but you need to control the transform origin of the rotates text as well.

I’ve updated the codepen to show it in action.

[codeispoetry]

Hi there @PaulOB sir & Everyone,

In the real world →

The videos will be different for every list item. On clicking on the image the video on the left should change.
How should we accomplish this? Will we need Ajax for this? or some alternate better arrangements are possible w/o the need to refresh or update the page.

[PaulOB]

@codeispoetry

How should we accomplish this? Will we need Ajax for this? or some alternate better arrangements are possible w/o the need to refresh or update the page.

I’m assuming you want to click the thumbnail videos on the right and change the video in the middle. You could do that with JS by changing the source of the video/ or iframe on click.

I’ve just quickly added that function to the first 2 images on the right and updated the codepen.

Again this is just a rough example and you would need to ensure that you use videos of the same aspect ratio size. If your videos are not all the same aspect ratio size then you will need to examine them to find the aspect ratio and adjust the padding-top on .video to be the correct percentage for that aspect ratio.