Only chỉ sử dụng tailwind thôi
<div className="text-center mt-5">
<div className="max-w-5xl mx-auto">
<div className="relative aspect-video rounded-lg overflow-hidden p-1 bg-gradient-to-br from-yellow-400 via-orange-500 to-yellow-600 shadow-[0_0_50px_rgba(251,191,36,0.6)]">
<div className="w-full h-full bg-gray-800 rounded-lg overflow-hidden">
{/* <div className="absolute inset-0 flex items-center justify-center">
<Play className="w-16 h-16 text-yellow-400" />
</div> */}
{/* YouTube video embed */}
<iframe className="w-full h-full object-cover"
// src="<https://www.youtube.com/embed/k9zTr2MAFRg?si=UIOL4RtOg7vF0ZQZ>"
src= "<https://www.youtube.com/embed/-LWJFwyy9Nw?si=5nF7iHTHcpAypVGh>"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin" allowFullScreen></iframe>
</div>
</div>
</div>
</div>
text-center mt-5
text-center
: căn chữ vào giữa (theo chiều ngang).mt-5
: thêm margin-top = 1.25rem (20px).max-w-5xl mx-auto
max-w-5xl
: set độ rộng tối đa của div là khoảng 64rem (1024px).mx-auto
: căn div ra giữa theo chiều ngang (margin left/right = auto).relative aspect-video rounded-lg overflow-hidden p-2 bg-gradient-to-br from-yellow-400 via-orange-500 to-yellow-600 shadow-[0_0_30px_rgba(251,191,36,0.6)]
Đây là div tạo hiệu ứng khung viền gradient và bóng đổ bao quanh video:
relative
: set vị trí tương đối (dùng khi bên trong có element absolute
).aspect-video
: tạo tỷ lệ 16:9 (giống màn hình/video).rounded-lg
: bo góc large (0.5rem).overflow-hidden
: ẩn phần tràn ra ngoài.p-2
: padding = 0.5rem (8px).bg-gradient-to-br
: tạo gradient nền từ trên trái → dưới phải.