Hướng dẫn responsive iframe khi chèn website wordpress

Hướng dẫn responsive iframe website

Hướng dẫn responsive iframe khi chèn website wordpress

Khi bạn chèn video từ youtube hay âm nhạc vào website có thể sẽ không hiển thị tốt trên mobile hay điện thoại.Sau đây dịch vụ thiết kế website giá rẻ tphcm sẽ hướng dẫn bạn cach responsive iframe website trên màn hình mobile.

Hướng dẫn responsive iframe video từ youtube,mp3.zing bằng css

Mặc định khi bạn nhúng video hay iframe từ website khác vào sẽ có dạng code như sau : [crayon] [/crayon] Trước tiên bạn bạn cần xóa width và height từ iframe nhúng vào.Sau đó bạn chèn 1 div để định dạng css cho iframe.Có thê tham khảo code dưới đây: [crayon]
[/crayon] Để responsive video bạn sự dụng css sau : [crayon] .intrinsic-container { position: relative; height: 0; overflow: hidden; } /* 16×9 Aspect Ratio */ .intrinsic-container-16×9 { padding-bottom: 56.25%; } /* 4×3 Aspect Ratio */ .intrinsic-container-4×3 { padding-bottom: 75%; } .intrinsic-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; } [/crayon] Hướng dẫn responsive iframes với SASS [crayon] @mixin generateRatios($width, $height, $prefix: “ratio-“) { $class-name: $prefix + $width + “x” + $height; .#{$class-name} { padding-bottom: ratio($width, $height); } // Output example: .ratio-16×9 {} } @include generateRatios(16,9); // 16×9 @include generateRatios(4,3); // 4×3 [/crayon] Ngoài cách responsive với css bạn có thể responsive iframe with js theo cách sau : [crayon] // Find all iframes var $iframes = $( “iframe” ); // Find & save the aspect ratio for all iframes $iframes.each(function () { $( this ).data( “ratio”, this.height / this.width ) // Remove the hardcoded width & height attributes .removeAttr( “width” ) .removeAttr( “height” ); }); // Resize the iframes when the window is resized $( window ).resize( function () { $iframes.each( function() { // Get the parent container’s width var width = $( this ).parent().width(); $( this ).width( width ) .height( width * $( this ).data( “ratio” ) ); }); // Resize to fix all iframes on page load. }).resize(); [/crayon] Bạn có thể tham khảo chi tiết tại https://benmarshall.me/responsive-iframes/ Cảm ơn bạn đã quan tâm tới hướng dẫn responsive iframe khi chèn vào website

Share this post

Trả lời

Email của bạn sẽ không được hiển thị công khai.

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

If you agree to these terms, please click here.


Chat Zalo

0932644183