Responsive iFrame chỉ sử dụng CSS

Các dịch vụ chẳng hạn như Youtube hay Google Maps,... cho phép chúng ta sử dụng video, bản đồ,... trên website dưới dạng iFrame. Tuy nhiên trong nhiều trường hợp thì việc hiển thị của các iFrame này chưa thực sự đẹp trong toàn bố cục trang web. Bài viết sẽ chỉ ra mẹo để bạn có thể nhúng iFrame hiển thị đẹp trên mọi thiết bị.

Mã nhúng

<iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0"></iframe>

Một mã nhúng sẽ bao gồm một số thuộc tính cơ bản:

• src: nguồn
• width: chiều rộng iFrame
• height: chiều cao iFrame ...

iFrame sẽ được cố định chiều rộng và chiều cao theo 2 thuộc tính width và height.

Responsive iFrame Video

Markup

<div class="video-wrapper">
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
</div>

CSS

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Nguyên lý:

VÌ bảnn thân iFrame đã được định nghĩa chiều rộng và chiều cao, nên ta sẽ phải tạo ra một wrapper bên ngoài và để iFrame đó absolute với chiều rộng vào chiều cao chính bằng wrapper, điều này sẽ giúp chúng ta có thể tuỳ biến kích thước video. Tuy nhiên chúng ta vẫn phải giữ đúng tỷ lệ. Để ý rằng đây là video có tỷ lệ khung hình 16:9 (height="315" width="560"). VÌ thế chúng ta sẽ tạo ra 1 wrapper có tỷ lệ 16:9 bằng cách padding-bottom: 56.25% 9/16*100% = 56.25%

Vậy với các video có tỷ lệ 4:3 thì ta sẽ phải để wrapper có padding-bottom: 75%

Responsive Calendar

Markup

<div class="calendar-wrapper">
    <iframe src="https://www.google.com/calendar/embed?height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;src=60aqhusbghf7v0qvvbfu1ml22k%40group.calendar.google.com&amp;color=%232952A3&amp;ctz=Europe%2FLondon" style=" border-width:0 " width="800" height="600" frameborder="0" scrolling="no"></iframe>
</div>

(width="800" height="600")

CSS

.calendar-wrapper {
    position: relative;
    padding-bottom: 75%; //(600/800*100% = 75%)
    height: 0;
    overflow: hidden;
}

.calendar-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Responsive Google Maps

Markup

<div class="maps-wrapper">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3022.260812859955!2d-73.990184!3d40.756288!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xb134c693ac14a04c!2sThe+TimesCenter!5e0!3m2!1sen!2suk!4v1393485725496" width="500" height="450" frameborder="0" style="border:0"></iframe>
</div>

(width="500" height="450")

CSS

.maps-wrapper {
    position: relative;
    padding-bottom: 90%; //(450/500*100% = 90%)
    height: 0;
    overflow: hidden;
}

.calendar-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

Hi vọng bạn sẽ có thêm 1 mẹo nhỏ khi responsive iFrame.