Docs

[xsimon59]

Hi- I’d like to use the Wistia video player on my page rather than the X lightbox (which doesn’t work for me on google Chrome -I’ve tried multiple times with X support and there doens’t seem to be a fix. Wistia’s works fine).

Is there a way I can use X to make the image for their player appear on the page as a circle instead of a rectangle? If so could you tell me how? Thanks.

http://bostonhypnosis.com/wordpress/test2/ – four bands down to see where it’s embedded.

-Brian

[xsimon59]

This reply has been marked as private.

[Rue Nel]

Hello Brian,

Thanks for writing in! To make an element as a perfect circle, you must consider the width and height of the video element. You can create circle around the video thumb as long as it has the same width and height or else it will display an ellipse. You can make use of this code:

.wistia_embed {
    position: relative;
}

.wistia_embed img{
    border-radius: 50%;
}

If this is not what you want, would you mind provide us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thank you.

[xsimon59]

Hi-

Please go to http://bostonhypnosis.com/wordpress/cloudtest/.

On the blue band, do you see the round eye image with the play button? I’d like to make the embedded wistia player above it (with the waving guy) be round like that. I tried using the code you sent a little, but I’m not sure where/how to integrate yours with theirs. Any guidance you could offer much appreciated. See above for my username and pw. Thanks.

-Brian

P.S. I’m not a coder, kind of stumbling through this stuff.

[Joao]

Hi There,

Can you please trying add this CSS Code to your Appereance / Customizer / Custom /CSS

#wistia_71.big_play_button_background {
width: 60px;
height: 60px;
border-radius: 50%;
}

#wistia_71.big_play_button_graphic {
top: 142px;
}

#wistia_71.big_play_button_background .wistia_mouseover {
border-radius: 0%;
}

Let us know how it goes.

Thanks,

Joao

[xsimon59]

OK, thanks. I pasted that in, but it didn’t have any effect. I’m not sure if there’s something I’m supposed to put in the class field on the button’s text area, but I tried a few variations of wistia_71.big_play_button and nothing made any difference. Again, I’m not a coder so I think you’ll have to tell me what to do with this pretty specifically for me to get it to work. Please let me know what i can do next. Thanks.

[Friech]

Hi There,

Do you mean you want that wistia thumbnail to be round? Add this to your Custom CSS.

.page-id-2272 .wistia_click_to_play div {
	border-radius: 100em;
}

Hope it helps, Cheers!

[xsimon59]

That’s it! Totally worked. Thank you!!!

-Brian

[Darshana]

Glad we were able to help 🙂

[xsimon59]

Hi-

This worked great, but now that I’ve added a video above the I’d like to appear as a rectangle, it’s getting thrown off and appearing with rounded edges. Could you tell me how that code would need to be modified to keep the circles for the players on the blue band down below and get the rounded edges off that first of me video in the rectangle?

[xsimon59]

This reply has been marked as private.

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

.page-id-2272 #wistia_84_romulus div {
	border-radius: 0;
}

Thanks.

[xsimon59]

Sorry, that had seemed to be owrking – it looked fine sometimes, usually after a page refresh, but now it doens’t seem to be working at all. I’m still getting those dark lines around the edges. Is there anything else I can do to fix this?

[Lely]

Hello Brian,

.home div.wistia_click_to_play {
    background: transparent !important;
}
.home .wistia_click_to_play div {
    border-radius:100em !important;
}
.home .wistia-video {
    padding: 0 !important;
    border: 0 !important;
}

Hope this helps.

[Author]

Posts