Thêm video vào nội dung bài viết sẽ giúp bài viết sinh động, trực quan hơn. Nhưng nếu các bài viết được xem trên các thiết bị có màn hình nhỏ, thì những video này có thể hỏng giao diện của website bạn. Do đó responsive cho video là một công việc cần thiết phải làm.

HTML

Cho phần tag video, iframe vào 1 div

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

CSS

Thêm CSS

.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%;
}

Kết quả