Để sở hữu thể chèn video youtube vào website sao cho thích hợp có bất kỳ một trình duyệt máy tính cũng như những thứ điện thoại thì bạn mang thể tiêu dùng giải pháp bằng CSS hoặc JavaScript. Trong bài viết này, mẫu mã web theo đề nghị xin giới thiệu đến người dùng giải pháp sử dụng CSS tương đối đơn thuần sở hữu vài thao tác thực hiện.
>>> Xem thêm: Thiet ke website theo yeu cau
thứ 1, bạn bắt buộc thêm vài đoạn CSS dưới đây vào trong tập tin CSS trong Template của Website bạn.
.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%;
Tiếp đến, hãy bạn hãy copy mã nhúng của video trên Youtube buộc phải đặt vào Website và cho vào thẻ <div class="youtube"></div> như ví dụ dưới đây:
trường hợp như bạn chưa biêt phương pháp lấy mã iframe youtube, bạn mang thể tham khảo hướng dẫn dưới đây:
Bước 1: Vào Youtube và chọn Video mà người dùng muốn nhúng vào website hay blog của mình.
Bước 2: tìm vào nút Share >> Embed >> Nhấp chuột nên rồi copy HTML code.
hiện nay, bạn có thể đăng bài viết và kiểm tra kết quả reponsive của youtube hoặc vimeo,...
sở hữu đoạn css trên thì video chèn vào Website của bạn sẽ tự động mang chiều rộng full mang chiều rộng của Website. trường hợp như bạn muốn ngừng chiều rộng video này, bạn với thể thêm loại css dưới đây vào css của template:
.wy
width: 80%;
max-width: 640px;
margin: 0 auto;
khi đó, đoạn video chèn vào bài viết của Website sẽ là:
<div class="wy">
<div class="youtube">
<iframe width="640" height="360" src="/https://www.youtube.com/embed/Ss8RdZLPCvs" frameborder="0" allowfullscreen></iframe>
</div></div>
Hình code css mới được thêm vào.
Chúc bạn thành công
>>> sở hữu thể bạn quan tâm: Thiet ke website mobile
0 nhận xét:
Đăng nhận xét