CSS tạo Responsive Video Youtube cho tất cả trình duyệt web
Các mạng xã hội chia sẻ video clip như YouTube, Vimeo,…vv là những mạng xã hội chia sẻ video lớn nhất thế giới và thông thường các dịch vụ này đều có chức năng cho phép người dùng chia sẻ share hoặc nhúng video vào trong website hay blog. Tuy nhiên, việc chèn mã code share embed Youtube, Vimeo vào website hoặc blog lại không hỗ trợ chức năng responsive video khi ta nhúng chúng vào trong nội dung bài viết – Tức là chúng không thể tự thay đổi kích thước video clip cho phù hợp với màn hình của máy tính bảng table hoặc điện thoại smartphone.
Công nghệ Responsive dịch sang tiếng việt nghĩa là đáp ứng. Chúng ta sẽ bàn về Responsive ở một bài khác, bạn tạm hiểu là “tự động thay đổi kích thước nội dung cho phù hợp với màn hình thiết bị truy cập”.
Cách nhúng youtube vào website hỗ trợ reponsive cho điện thoại
Các thức thực hiện như sau
Định nghĩa CSS cho phần html nhúng video từ youtube
.box-youtube {
width: 98%;
max-width: 640px;
margin: 0 auto;
}
.youtube {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.youtube iframe, .youtube object, .youtube embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}Nhúng HTML chia sẻ video từ youtube
Copy mã nhúng video clip từ Youtube
1) Bạn truy cập vào Youtube / lấy mã link share / embed (tiếng Việt là Chia sẻ / Nhúng)
Ví dụ: https://www.youtube.com/watch?v=B51vaF50o8w&feature=emb_title
2) Dán phần mã nhúng iframe vừa copy ở trên vào trong bài viết như sau
<div class="box-youtube">
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/B51vaF50o8w" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>3) Xem kết quả hiện thị video trên điện thoại
Chúc các bạn thành công
nhantam
thiet ke web tại Panpic
