[CẬP NHẬT] Cách nhúng video từ Google Drive với phần tử video HTML5 vào blogspot

Trước đây tại Thủ thuật blogspot đã chia sẻ Cách Nhúng Video Google Drive vào blogspot với Phần tử Video HTML5. Nhưng tại thời điểm đó để có thể nhúng video được lưu trữ trên Google Drive, bạn phải sử dụng khóa API của Google Drive để video có thể được nhúng với các phần tử video HTML5.

Tuy nhiên, do để tạo khóa API Google Drive khá phức tạp cho người mới bắt đầu nên bài này sẽ chia sẻ một cách dễ dàng hơn để nhúng video trên Google Drive 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

Ads in post custom1