locked
Can not set background-color of video element in Metro app and IE10.0? RRS feed

  • Question

  • I want to set the background color of a video element if my metro app. But I find it is invalid. IE10 also has this issue. The background color of video element is always black in Metro app and IE10 whatever I set the background-color style. Then I test the issue in Chrome and find I can set background-color of video element. What a strange thing.

    The code I test is simple:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>VideoCrashTestDemo</title>
    </head>
    <body>  
        <video src="1.mp4" controls width ="400" height ="300" poster ="images/defaultVideoImage.png" style = "background-color:red;"></video>
    </body>
    </html>

    Wednesday, April 17, 2013 3:01 AM

Answers

  • I am not able to reproduce the issue. If I use the following HTML and paste it in a Windows Store app or save it as a HTML page, I am able to see the expected behavior (the video tag has the red color background). The only thing I have removed from your code above is the JScript references as well as the actual source of the video to ensure that the tag does not load any video and shows the red background.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App1</title>
    </head>
    <body>
        <video controls width="400" height ="300" style="background-color:red;"></video>
    </body>
    </html>


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

    • Marked as answer by Lattimore Monday, April 22, 2013 2:28 AM
    Thursday, April 18, 2013 12:22 AM
    Moderator

All replies

  • I am not able to reproduce the issue. If I use the following HTML and paste it in a Windows Store app or save it as a HTML page, I am able to see the expected behavior (the video tag has the red color background). The only thing I have removed from your code above is the JScript references as well as the actual source of the video to ensure that the tag does not load any video and shows the red background.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>App1</title>
    </head>
    <body>
        <video controls width="400" height ="300" style="background-color:red;"></video>
    </body>
    </html>


    @prashantphadke || Windows Store Developer Solutions #WSDevSol || Want more solutions? See our blog! http://aka.ms/t4vuvz

    • Marked as answer by Lattimore Monday, April 22, 2013 2:28 AM
    Thursday, April 18, 2013 12:22 AM
    Moderator
  • But once I put it back the way the video is black. how do I go red?
    Friday, December 13, 2013 2:10 PM