[Resolved] Embed 2 youtube videos side by side

Home Forums Support [Resolved] Embed 2 youtube videos side by side

Home Forums Support Embed 2 youtube videos side by side

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #1955313
    GeneratePressUser

    Hello Team,

    Pls can you tell how can we embed 2 youtube videos side by side.

    See the link in private box.

    #1955370
    Leo
    Staff
    Customer Support

    Hi there,

    You can use a grid block from GenerateBlocks to create columns and insert an YouTube embed block in each container:
    https://docs.generateblocks.com/article/grid-overview/

    You can also consider using the Columns block from WordPress core but it offers less options and controls for the columns.

    Let me know if this helps ๐Ÿ™‚

    #1955378
    GeneratePressUser

    Hello Leo,

    We have disabled gutenberg and gutenberg is not available for woocommerce products.

    Is there a manual code which can be used or any other way?

    #1955383
    Elvin
    Staff
    Customer Support

    Hi there,

    We can do this with CSS like this –

    div#tab-description {
        display: flex;
        justify-content: space-between;
    }

    But this is not an ideal solution as this will apply to all descriptions of products.

    Can you edit the HTML structure of the videos in the description to wrap it with a div?

    example:

    <div class="video-desc-grid">
    //video #1 here
    //video #2 here
    </div>

    And then do this CSS instead

    div#tab-description div.video-desc-grid {
        display: flex;
        justify-content: space-between;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1956456
    GeneratePressUser

    Hello Elvin,

    Thanks a lot, wrapping them around div worked perfectly ๐Ÿ˜€

    #1956460
    GeneratePressUser

    Hello,

    It seems on mobile they appear sticking together which looks weird, pls can you tell what can be done to make them look responsive.

    #1956507
    Leo
    Staff
    Customer Support

    You’d need to do something like this to make it responsive:
    https://docs.generatepress.com/article/responsive-videos/

    #1956560
    GeneratePressUser

    Hello,

    I guess I need to merge that with your given CSS, to get both responsiveness and also proper alignment.

    #1956566
    Elvin
    Staff
    Customer Support

    Yeah that’s about right.

    Example:

    <div class="video-desc-grid">
    <div class="videoWrapper">
       // Your video embed code
    </div>
    <div class="videoWrapper">
       // Your video embed code
    </div>
    </div>

    And its CSS:

    div#tab-description div.video-desc-grid {
        display: flex;
        justify-content: space-between;
    }
    
    div#tab-description div.video-desc-grid .videoWrapper {
    	position: relative;
    	padding-bottom: 56.25%; /* 16:9 */
    	padding-top: 25px;
    	height: 0;
    }
    div#tab-description div.video-desc-grid .videoWrapper iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%;
    	height: 100%;
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1959119
    GeneratePressUser

    Hello,

    I did that and it seems the videos disappeared, pls can u check.

    #1959307
    GeneratePressUser

    It seems the topic was marked resolved, actually after using the code videos disappeared, you can visit the page and see.

    #1959400
    Elvin
    Staff
    Customer Support

    Try this instead:

    div#tab-description div.video-desc-grid {
        display: flex;
        justify-content: space-between;
    }
    
    div#tab-description div.video-desc-grid .videoWrapper {
    	position: relative;
    	padding-bottom: 56.25%; /* 16:9 */
    	margin-top: 25px;
    	flex: 0 1 49%;
    }
    
    div#tab-description div.video-desc-grid .videoWrapper iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%; 
    	height: 400px
    }

    Change the height value to your preference.

    A wise man once said:
    "Have you cleared your cache?"

    #1962634
    GeneratePressUser

    That leaves a lot of space at bottom but on mobile it then looks weird, on mobile it should look 1 below the other, just on desktop it should be side by side.

    #1962658
    Ying
    Staff
    Customer Support

    You just need to add a media query to the CSS Elvin provided so it only applies on desktop:

    @media (min-width: 769px) {
    div#tab-description div.video-desc-grid {
        display: flex;
        justify-content: space-between;
    }
    
    div#tab-description div.video-desc-grid .videoWrapper {
    	position: relative;
    	padding-bottom: 56.25%; /* 16:9 */
    	margin-top: 25px;
    	flex: 0 1 49%;
    }
    
    div#tab-description div.video-desc-grid .videoWrapper iframe {
    	position: absolute;
    	top: 0;
    	left: 0;
    	width: 100%; 
    	height: 400px
    }
    }
    #1962666
    GeneratePressUser

    Hey Ying,

    Thanks a lot, it worked, I did some changes I made it <object> code instead of iframe, so I no longer had to use:

    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    margin-top: 25px;

    Now just 1 more thing, can you tell how can I reduce its height a bit?

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.