0

I have used video tag in my code

<div class="mask">                                   
  <video class="circleVideo" id="video" width="423" height="423" autoplay="autoplay" style="border-radius: 220px;">
    <source src="videoconv/loginVideo.mp4" type="video/mp4" />
    <source src="videoconv/loginVideo.ogv" type="video/ogg">
    <source src="videoconv/loginVideo.webm" type="video/webm">
    Your browser does not support the video tag.
  </video>
</div>

Here i have added some Css for the video and div.

        border-radius: 220px;
        height: 423px;
        width: 423px;
        overflow: hidden;
        position: absolute;
        top: 198px;
        right: -416px;
        background-color: rgba(255,163,25,0.3);
        -webkit-border-radius: 220px;
        -moz-border-radius: 220px;
        -ms-border-radius: 220px;
        -o-border-radius: 220px;
        /*clip: rect(1px, 423px, 423px, 0);*/
        -khtml-border-radius: 220px;
        -webkit-mask-image: url(../images/mask_img.png);
    }


    .circleVideo {
        width: 582px;
        border-radius: 220px;
        margin-top: -33px;
        margin-left: -74px;
        height: 488px;
    }

Here is the js I have added, which allows me to see this in IE:

html5media.min.js

I am not able to apply the css to the video in IE. It works correctly in chrome and firefox and opera.

What more should i do so that the video also appears in a circle in IE?

pygeek
  • 7,356
  • 1
  • 20
  • 41
Akanksha
  • 25
  • 3

2 Answers2

0

IE can be tricky with border-radius, it appears someone had a similar issue: here

There are some workarounds for CSS3 compatibility pre-IE9, many will suggest Modenizer - a super easy method to try is CSS3Pie

Community
  • 1
  • 1
notchris
  • 180
  • 10
0

  1. Check the IE version as recommended by @reto.

    Note that border-radius does not exist in earlier versions of IE. You may have to write styling that targets earlier versions of IE, if you wish to support them.

  2. Inspect the element in IE to ensure the element you are styling actually exists.

Depending on how old the version of IE that you are working with is, I would recommend taking a progressive enhancement1 approach.

References

  1. Progressive Enhancement: http://en.wikipedia.org/wiki/Progressive_enhancement
pygeek
  • 7,356
  • 1
  • 20
  • 41