Responsive YouTube Embed

YouTube cho phép người dùng nhúng video vào trong trang web hay blog của chính họ. Tuy nhiên youtube không hỗ trợ chức năng responsive video khi ta sử dụng mã nhúng (Embed Code). Tức là những video đó sẽ không tự động thu nhỏ lại mỗi khi kích thước màn hình trình duyệt thay đổi. Và điều này thật sự sẽ gây khó khăn cho người dùng những thiết bị di động vốn dĩ có kích thước hiển thị nhỏ hơn rất nhiều so với máy tính để bàn hay laptop. Hôm nay, mình xin chia sẽ đến các bạn thủ thuật responsive youtube embed sử dụng css cho chúng ta nhúng nó vào web hay blog.

- Để được responsive khi chèn mã nhúng youtube vào blog chỉ cần copy mã CSS dưới đây vào template

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

- Sử dụng bằng cách thêm thẻ <div class="video-container">...</div> bao quanh mã nhúng, ví dụ:

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

Xem thêm: Responsive Plugin Comment Facebook

Responsive YouTube Demo

Nguồn: Internet