Docs

[xsimon59]

Hi – I’m using wistia and the Embed Video shortcode doesn’t seem to work well with it. So instead, I embed the video by using the text shortcode to put the video in directly – http://bostonhypnosis.com/wordpress/issues/. I’d like to be able to center it and have the same lines around it as the shortcode embedded videos. Could you help me do that? I couldn’t figure it out on my own. Thanks.

[John Ezra]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer or in your child theme’s style.css file.

div#wistia-xab342u2r9-1 {
    margin: 0 auto;
}

img#wistia_170.thumbnail_img {
    border: 2px solid #e5e5e5;
    padding: 2.5%;
    background-color: #fff;
}

Hope this helps – thanks!

[xsimon59]

Hi-

Thanks for that. It worked to center the video, but the lines still didn’t appear around it. Can you tell me how I could get that part working as well? Thanks.

-Brian

[xsimon59]

This reply has been marked as private.

[Jade]

Hi there,

Please update this code:

img#wistia_170.thumbnail_img {
    border: 2px solid #e5e5e5;
    padding: 2.5%;
    background-color: #fff;
}

to

#wistia_170.thumbnail_img {
    border: 2px solid #e5e5e5 !important;
    padding: 2.5% !important;
    background-color: #fff !important;
}

Hope this helps.

[xsimon59]

Sorry, that didn’t work either. Is there anything else I can do?

[Darshana]

Hi there,

It seems that you have an error in your custom CSS which cause not parse CSS correctly. Please copy all of your custom CSS under Customizer into an online tool like CSS Lint (http://csslint.net/) and check for errors.

Thanks!

[xsimon59]

OK, I did what you suggested and corrected the error in my CSS. Lint says it’s fine now. But I’m still not getting the lines around the video. see above if you’d like my username/password. Thanks.

[Jade]

Hi Simon,

I have tried to login here http://bostonhypnosis.com/wordpress/wp-login.php using the details you have provided but it seems to be incorrect.

Kindly double check it. Thank you.

[xsimon59]

This reply has been marked as private.

[Rad]

Hi there,

The problem with this embed is it applies width and height on every layer of its element. Even if it’s added to responsive element like X embed, it will still follow the static dimension that comes with it.

Please change that CSS to this,

div#wistia-xab342u2r9-1 {
    margin: 5% auto;
	position:relative;
}
div#wistia-xab342u2r9-1:before {
	
	border: 2px solid #e5e5e5;
    background-color: #fff;
    content:"";
    display:block;
    position: absolute;
	top:-5%;
    right:-2.5%;
	bottom:-5%;
	left:-2.5%;
}

Hope this helps.

[xsimon59]

Yes, that did. Thank you. One more thing if you don’t mind. I switched the player on the page to one that doesn’t pop out to a separate lightbox. Now that I’ve done that, the lines around the player have disappeared. I tried, but can’t figure out how to get the code you wrote to the player that’s on the page now. Can you help?

[Friech]

Hi There,

Define this custom CSS in Customizer

.wistia-video {border: 2px solid #e5e5e5;padding: 2%;}
.wistia-video p {margin-bottom: 0;}

And then apply the class wistia-video on the Text element where the wistia video is.

Hope it helps, Cheers!

[Author]

Posts