JSFiddle - React, Tailwind, and code Playground

by mspsys

HTML

<p>아니면 이런걸 말씀하신걸지도....<br /><br />이거 왜 IE8에서는 부드럽게 안떠요? 이러시는 분 안계시길..
    ㅠㅠㅠㅠ
<br />
    css transtion 은 IE10 이하는 이해를 못합니다.
</p>
<input type="button" value="누르시면 커집니다" id="btn" />
<br />

<video id="video" class="small" autoplay="true" loop="true">
            <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4"/>
            <source src="http://www.craftymind.com/factory/html5video/BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>

CSS

small {
-webkit-transform: scale(0.5, 0.5);
   -moz-transform: scale(0.5, 0.5);
    -ms-transform: scale(0.5, 0.5);
        transform: scale(0.5, 0.5);

}

#video {height: 100%; width: 100%; position: absolute;
-webkit-transition: -webkit-transform 1s ease-in;
   -moz-transition: -moz-transform 1s ease-in;
    -ms-transition: -ms-transform 1s ease-in;
        transition: transform 1s ease-in;
}

JavaScript

$("#video").on('click', function() {
    $(this).toggleClass('small');
});


$("#btn").on('click', function() {
    $("#video").get(0).webkitEnterFullScreen();
    $("#video").removeClass('small');
});