Arthur-FT of Flashtalking Studio DE
7/1/2019 - 11:56 AM

Workaround for giving a video-element the CSS-property COVER working also in IE10

This is a workaround for giving a video-element the CSS-property COVER working also in IE10 | its allways filling responsive the content. Here found: https://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img Internal example-preview: https://creativepreview.flashtalking.net/p/ja4vFJpRL

video_cover_IE10_responsive
content_copyfile_download
<!DOCTYPE html>
<html>
    <head>
        <style>

            /* This is a workaround for giving a video-element the CSS-property COVER working also in IE10 | its allways filling responsive the content */
            /* Here found: https://stackoverflow.com/questions/10797632/simulate-background-sizecover-on-video-or-img */
            /* Internal example-preview: https://creativepreview.flashtalking.net/p/ja4vFJpRL */

            .parent-element-to-video {
                overflow: hidden;
                position: relative; /* or absolute or fixed */
                left: 100px;    /* remove this property if want the video filling the window */
                top: 200px;     /* remove this property if want the video filling the window */
                width: 50%;     /* remove this property if want the video filling the window */
                height: 28%;    /* remove this property if want the video filling the window (28% = 50 * 9 / 16 approx), its not stretched because its only the container */
                border: 2px solid aquamarine;
            }

            #vid {
                height: 100%;
                width: 177.77777778vh;              /* 100 * 16 / 9 */
                min-width: 100%;
                min-height: 56.25vw;                /* 100 * 9 / 16 */

                /* If you want the video centered, you can use the surefire centering approach*/
                position: absolute;
                left: 50%;                          /* % of surrounding element */
                top: 50%;
                transform: translate(-50%, -50%);   /* % of current element */
            }

        </style>
    </head>

    <body>
        <ft-default clicktag="1" class="parent-element-to-video">
            <ft-video name="video1" id="vid" poster="sunset.jpg" autoplay loop></ft-video>
        </ft-default>

        <script src="//cdn.flashtalking.com/frameworks/js/api/2/10/html5API.js"></script>
    </body>
</html>