Question 376978 in SEO Question posted in
Some basic information to get you started with this can be found here.

Seo – 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

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Try putting this CSS into your app:

    .wistia_embed > div {
  border-radius: 10px !important;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search