Html5 mobile terminals introduce youku video iframe adaptive, html5iframe

Html5 mobile terminals introduce youku video iframe adaptive, html5iframe

1. The video to be introduced

<Iframe height = 498 width = 510 src = "http://player.youku.com/embed/XMTI4MjU5OTA3Mg==" frameborder = 0 allowfullscreen> </iframe>

2. Set iframe to 100% in css.

3. Adapt to the screen width. Here I set a fixed proportion of video 16/9.

Window. onload = window. onresize = function () {resizeIframe ();} var resizeIframe = function () {var bodyw = document. body. clientWidth; for (var ilength = 0; ilength <= document. getElementsByTagName ("iframe "). length; ilength ++) {document. getElementsByTagName ("iframe") [ilength]. height = bodyw * 9/16; // set height }}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.