embedding videos next to each other in a post or page

  • Unknown's avatar
    vanguardhq · Member ·

    Hi

    Is it possible to embed two or three smaller sized videos next to each other in a post or a page?

    Currently, ours are displaying on top of each other.

    Many thanks

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    It might depend on how you are embedding the videos and which video provider you are using and how the shortcode for that service works. Can you reply back here with a link to the page where we can see the problem where the videos are stacked or can you explain how you inserted the videos and include the video links?

  • Unknown's avatar
    vanguardhq · Member ·

    Thanks, this is the page we’re having a problem with:

    http://01testsite01.golaun.ch/2014/10/25/financial-services/

    The top three images are a gallery, it’s the two smaller videos underneath we’re trying to sort out. Actually, we are trying to have three videos side by side but the first one, called ‘Targets don’t work’ is in the line of code and not displaying as a video. The second and third video are the same video, we’re just trying to test the principle of three videos in a row. The videos don’t need to be as small as they currently are, we were just experimenting with reducing the size.

    Both videos have been uploaded into the WordPress library and we intend to play them through VideoPress.

    I have had a go with div and float but this hasn’t been successful, so I have probably made multiple errors!

    Many thanks

  • Unknown's avatar
    designsimply · Member ·

    we’re just trying to test the principle of three videos in a row

    I looked at http://01testsite01.golaun.ch/2014/10/25/financial-services/ and I see that you have gallery just below the sentence that ends with “the benefits of improved profits.” Galleries will not display videos inline, so to get them displaying side-by-side, you need to insert them one at a time first.

    You will also need to set the width for the videos in the shortcode. If you are using VideoPress, you can do that by adding “w=250” to the shortcode using the “Text” tab at the top right of the editor when you are writing the post. Here is an example:

    [wpvideo 0WQjhYqg w=250][wpvideo 0WQjhYqg w=250][wpvideo 0WQjhYqg w=250]

    Change “0WQjhYqg” to the ones shown for your videos if you click on them in the media library.

    After that, they usually get centered by default, which means they will stack on top of each other instead of displaying side-by-side. To get around that, you try to can use a little custom CSS. Here is an example I created that works with the VideoPress example from above:

    .video-player {
	margin: 0 1em 0 0;
	float: left;
}

    You can adjust the “w=250” part and the “1em” part of the margin to change the spacing around to what looks good to you.

    Custom CSS can be added using the Appearance > Customize > CSS editor in your dashboard.

    The down side for using the CSS above is that it will apply to all VideoPress embeds in other places on the site as well—and that might not look good. To get around that, you can target just the http://01testsite01.golaun.ch/2014/10/25/financial-services/ page by updating it to this:

    .postid-1271 .video-player {
	margin: 0 1em 0 0;
	float: left;
}

    If these steps seem a little complex, I think what you’ve got now where the videos are large and display inline is also good. :) It might be a matter of trying out both and seeing what works best for you.

  • The topic ‘embedding videos next to each other in a post or page’ is closed to new replies.