Cách nhúng video từ Google Drive với phần tử video HTML5 vào blogspot

 


Đối với HTML phần nhúng, nó vẫn sử dụng các phần tử video HTML5, trong khi đối với nguồn video này, giờ đây bạn có thể sử dụng URL tải xuống trực tiếp của Google Drive.

Với URL tải xuống trực tiếp của Google Drive này, chắc chắn rằng ngay cả những người mới bắt đầu cũng sẽ dễ dàng nhận được các nguồn video trên Google Drive. Tất nhiên, cách lấy URL Tải xuống Trực tiếp của Google Drive là khá dễ dàng, với sự trợ giúp của công cụ Trình tạo liên kết tải xuống trực tiếp của Google Drive ở cuối bài viết này.

Để nhúng video trên Google Drive với phần tử video HTML5 vào blogspot, ta làm theo các bước dưới đây.

1- Thêm css vào phần css của blog
.video-responsive { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video-responsive video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0; }
2- Sử dụng mã sau để hiển thị video từ Google Drive với các phần tử video HTML5 trong bài đăng.
<div class="video-responsive"> <video controls> <source type="video/mp4" src="URL video trực tiếp ở đây"> </video> </div>
Cách lấy link trực tiếp từ Google Drive chắc mọi người đều biết cách vì cũng không quá phức tạp ví dụ:
Link chia sẻ có dạng:
1- https://drive.google.com/file/d/ABCDXYTZ/view?usp=sharing
Hoặc
2- https://drive.google.com/open?id=ABCDXYTZ
Link tải trực tiếp có dạng:
https://drive.google.com/uc?id=ABCDXYTZ
Để thuận tiện có thể dùng công cụ sau để lấy link tải trực tiếp sử dụng cho việc post video từ Google Drive với phần tử video HTML5 vào blogspot bằng cách dán link chia sẻ dạng 1 vào công cụ và nhấn "Tạo liên kết trực tiếp" để lấy link

Trình tạo liên kết tải xuống trực tiếp của Google Drive




Code tạo bảng cho ai cần.
DOWNLOAD
Chia sẻ:

Đăng nhận xét