Embedding 3 Youtube videos all in one row

  • jellyfarmstudios

    (@jellyfarmstudios)


    10 years, 12 months ago

    Hi all,
    I’m working on a mockup page of my portfolio works in broadcast and I’m using Theme Horse’s Attitude theme that has the wide page layout with no sidebars that gives me quite a lot of room to place 3 videos per line all at half the size of a normal YouTube video.

    I’ve used a code that allows me to put 2 Youtube videos side by side as shown below:

    <div style=”float:left;width:auto;margin-right:14px;”>
    SHORTCODE1 HERE
    </div>
    <div style=”float:left;width:auto;”>
    SHORTCODE2 HERE
    </div>
    <div style=”clear:both;height:1em;”></div>

    But I need to find the code to add a third video on the same row.

    Can anyone help?

    The blog I need help with is jellyfarmstudios.com.

    Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • WPyogi

    (@wpyogi)

    10 years, 12 months ago

    I’d put the CSS in the external stylesheet – definitely use a child theme for this kind of customizing – this should be close to do what you want:

    <div class="videos">

<div class="threedivs">
code here
</div>

<div class="threedivs">
code here
</div>

<div class="threedivs">
code here
</div>

</div>

    CSS:

    .videos {

}

.threedivs {
   float: left;
   width: 30%;
   min-width: 50px;
   margin: 0 3%;
}

    Thread Starter jellyfarmstudios

    (@jellyfarmstudios)

    10 years, 12 months ago

    Hi Wpyogi,
    Actually I’m a coding noob. I know nothing about CSS. 😛

    The code I used was simple HTML which I placed on the text version of my page and it works great for 2 videos but not 3.

    I haven’t touched or coded anything on my theme. Is there a solution I can use that doesn’t require me to touch all that complicated CSS stylesheet stuff?

    WPyogi

    (@wpyogi)

    10 years, 12 months ago

    It’s really not great to use inline CSS – but I just looked at that theme and it has built-in custom CSS so you can just copy the above CSS into that space – it’s under theme options — design options.

    Then copy the HTML part into the content – add the video shortcodes where it says “code here.”

    CSS really isn’t hard and learning the basics is pretty necessary if you want to do much customizing of a theme :).

    WPyogi

    (@wpyogi)

    10 years, 12 months ago

    If you’d rather not do that, you can try changing the code you have to this – but you may need to adjust the CSS in the divs:

    <div style="float:left;width:auto;margin-right:14px;">
SHORTCODE1 HERE
</div>
<div style="float:left;width:auto;margin-right:14px;">
SHORTCODE2 HERE
</div>
<div style="float:left;width:auto;">
SHORTCODE3 HERE
</div>
<div style="clear:both;height:1em;"></div>

    Thread Starter jellyfarmstudios

    (@jellyfarmstudios)

    10 years, 12 months ago

    Hi WPyogi,

    Awesome! This worked. Thank you!!

    Wow, trust I tried to learn. I can wrap my head around the design of graphics and basic HTML, but the moment CSS comes into the picture, I’m like huh, what, say that again?

    I think it’s the descriptions to get what I want that’s confusing. I’ll have to go to school to really grasp it.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Embedding 3 Youtube videos all in one row’ is closed to new replies.