CODEWITHSUNDEEP
cssvideoembedembeddingwistia
matthew bowkis
matthew bowkis

Reputation: 1

Add Rounded Corners To Wistia Embed

i have 0 coding experience or knowledge so could someone show me how I can add rounded corners to my video embeded on my website for all browsers in desktop and mobile.

I'm using Wistia and below is the embed code i get from them:

<script src="https://fast.wistia.com/embed/medias/g4bhvsj2cc.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_g4bhvsj2cc seo=true videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/g4bhvsj2cc/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

Can someone tell me what to add and where to add it?

I've checked some other posts on here but none seem to work for me

Upvotes: -1

Views: 507

Answers (2)

Guilherme do Valle
Guilherme do Valle

Reputation: 508

Try putting this CSS into your app:

.wistia_embed > div {
  border-radius: 10px !important;
}

Upvotes: 0

wouch
wouch

Reputation: 1241

You can add a border-radius to the .wistia_responsive_padding element, but caution that if you add too much the buttons in the bottom of the video will start to get cut off. The example has 10px

<script src="https://fast.wistia.com/embed/medias/g4bhvsj2cc.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;border-radius:10px;overflow: hidden;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_g4bhvsj2cc seo=true videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/g4bhvsj2cc/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

Upvotes: 0

Related Questions