內容簡介
這是一個簡單的短代碼，可將響應式 iframe 嵌入您的文章中。當頁面重新調整大小時，iframe 會保持指定的比例。
[rframe ratio=”16×9″ src=”http://flixel.com/player/snqi608mlq1h98w5p9jy” width=”60%” /]
它是如何工作的
創建帶有指定寬度的 DIV 塊。內部是透明的 PNG 文件，具有指定的比例，縮放到 100% 的寬度，高度設置為自動。該圖像將使用正確的比例縮放主 DIV 的尺寸。
然後將嵌入的 IFRAME 設置為填充包裝器 DIV，因此它將隨著圖像縮放。
圖像是通過 PHP 即時創建並作為內嵌圖像直接插入到 img 標記的 src 屬性中。
學分
特別感謝 Masau（http://jsfiddle.net/Masau/7WRHM/）提供的“技巧”。
外掛標籤
開發者團隊
原文外掛簡介
This is simple shortcode to embed responsive iframe to your post. Iframe will hold the specified ratio when page is rescaled.
[rframe ratio=”16×9″ src=”http://flixel.com/player/snqi608mlq1h98w5p9jy” width=”60%” /]
How it Works
DIV block with specified width is creted. Inside is transparent PNG file with specifed ratio scaled to 100% width and height set to auto. This image will scale the main DIV to size with correct ratio.
Embeded IFRAME is then set to fill the wrapper DIV, so it is scaled with the image.
Image is created on the fly via PHP and inserted as inline image directly to src attribute of img tag.
Credit
Thanks to Masau ( http://jsfiddle.net/Masau/7WRHM/ ) for the “trick”.
