Loading an array of videos in two columns in React

Question

Loading an array of videos in two columns in React

130 views Asked by kenton At 30 June 2022 at 14:29

I'm trying to get videos to load two videos per row down the page in order and i'm having trouble figuring out how. Currently I have them loading from contentful in one column with this:

const VideoPage = ({ data }) => {
return (
    <div>
        <Layout>
        <Head title="Videos"/>
            <div className={videoStyles.container}>
                {data.allContentfulVideoEmbed.nodes.map((node) => {
                    return (
                        <div>
                            <div className={videoStyles.videoWrapper}
                            dangerouslySetInnerHTML={{ __html: node.markdownContent.childMarkdownRemark.html }}
                            />
                            <div className={videoStyles.titles}>
                                <p>{node.title}</p>
                            </div>
                        </div>
                    );
                })}
            </div>
        </Layout>
    </div>
)
}

Does anyone know how to go about this?

Original Q&A

There are 1 answers

**Oliver Heward** · Answer 1 · 2022-07-01T12:03:46+00:00

Simply throw them into a grid with 2 columns, each looped item will then be placed in corrosponding columns 1 - 2 for each row. For instance with Tailwindcss

const VideoPage = ({ data }) => {
return (
    <div>
        <Layout>
        <Head title="Videos"/>
            <div className="grid grid-cols-2">
                {data.allContentfulVideoEmbed.nodes.map((node) => {
                    return (
                      /**
                        * Every nth 1 will be column 1
                        * Every nth 2 will be column 2
                        */
                        <div>
                            <div className={videoStyles.videoWrapper}
                            dangerouslySetInnerHTML={{ __html: node.markdownContent.childMarkdownRemark.html }}
                            />
                            <div className={videoStyles.titles}>
                                <p>{node.title}</p>
                            </div>
                        </div>
                    );
                })}
            </div>
        </Layout>
    </div>
)
}

TechQA.

Loading an array of videos in two columns in React

There are 1 answers

Related Questions in JAVASCRIPT

Related Questions in CSS

Related Questions in REACTJS

Related Questions in CONTENTFUL

Related Questions in VIDEO-EMBEDDING

Popular Questions

Popular Tags

Trending Questions