How to resize iframe based player?

Original Player

Re-sized Player

Use below code

<div style=”-moz-transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); clear:both; float:left;”><iframe src=”http://html5player.svnlabs.com/v1/html5full.html?id=276″ height=”227″ width=”586″ frameborder=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no”></iframe></div>

Div Style

style=”-moz-transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); -webkit-transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); -o-transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); -ms-transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); transform: scale(.8) rotate(0deg) translateX(-40px) translateY(0px) skewX(0deg) skewY(0deg); clear:both; float:left;”

You can use suitable scale(.8) parameter to resize player on webpage 🙂
i.e. scale(.8), scale(.67), scale(.5) etc.

Posted in: HTML5, Joomla, WordPress