Code for centering videos and photos in topics/posts horizontally


(Blu McCormick) #1

G’day,

I have this code (thanks to III) to center photos horizontally and would like to do the same for embedded videos of all types.


/*center images uploaded to posts*/
.lightbox-wrapper {
    display: block;
    text-align: center;
}

p>img {
    display: block;
    margin: 0 auto; 
}

Does anyone know the best (broad, applies to all embedded video types) code for horizontally centering videos?

Thanks in advance.


(Joe) #2

Videos uploaded to Discourse will be centered by default. Videos from external services like Youtube / Vimeo will almost always be within iframes, So if you want something very general you can try something like this:

.cooked>iframe {
    display: block;
    margin: 0 auto;
}

.lazyYT.lazyYT-container {
    margin: 0 auto;
}

To center both Youtube videos specifically - these are handled differently in Discourse - and act as a catch-all for all other embedded videos.

Do note that this is a very general rule and will cause all iframe elements to be centered - which in this case is generally harmless.

A slightly more specific way is to target certain services that are most likely to be used. You can do something like this:

.cooked>iframe[src*="player.vimeo.com"] {
    display: block;
    margin: 0 auto;
}

And this will only have effect on iframes from vimeo instead of styling all iframes.

You can read more about attribute selectors here


(Blu McCormick) #3

Worked like a charm, Joe. Thanks.