.jpg)
.jpg)
18:31
Annhientutai
Khung Video quảng cáo trên trang Web
Cách sử dụng:
Nhúng vào trang web:
Dán mã trên vào vị trí mong muốn trên trang web của bạn, như sidebar hoặc main content.
Chỉnh sửa nội dung:
1. Tiêu đề video: Thay đổi nội dung của phần id="video-title" trong mã HTML hoặc qua JavaScript.
2. Giới thiệu video: Chỉnh sửa đoạn văn bản id="video-description".
3. Liên kết video YouTube:
1. Embed link: Thay URL trong src="https://www.youtube.com/embed/abc123xyz".
2. Liên kết đến YouTube: Thay URL trong href="https://www.youtube.com/watch?v=abc123xyz".
Tùy chỉnh kích thước:
Điều chỉnh width và height của thẻ <iframe> để phù hợp với không gian trang web của bạn.
Ưu điểm:
· Dễ dàng tích hợp: Hoạt động trên mọi trình duyệt và dễ thêm vào Blogspot, WordPress, hoặc bất kỳ trang web nào.
· Đơn giản nhưng hiệu quả: Gọn gàng, phù hợp với sidebar hoặc các khu vực nhỏ.
· Tùy biến linh hoạt: Dễ dàng chỉnh sửa nội dung, màu sắc, và bố cục.
Dưới đây là một khung HTML đơn giản để nhúng video từ YouTube vào trang web của bạn. Khung này có phần giới thiệu và phù hợp để đặt vào sidebar hoặc main content của một trang web.
Mã HTML và CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Advertisement</title>
<style>
.video-widget {
border: 2px solid #ddd;
border-radius: 8px;
padding: 16px;
margin: 20px auto;
max-width: 300px; /* Adjust the width for sidebar compatibility */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
background-color: #f9f9f9;
text-align: center;
}
.video-widget h3 {
font-size: 18px;
color: #333;
margin-bottom: 12px;
}
.video-widget p {
font-size: 14px;
color: #555;
margin-bottom: 12px;
}
.video-widget iframe {
width: 100%;
height: 180px; /* Adjust the height as needed */
border: none;
border-radius: 8px;
}
.video-widget a {
display: inline-block;
padding: 8px 12px;
color: #fff;
background-color: #007bff;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
margin-top: 12px;
}
.video-widget a:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<!-- Video Widget -->
<div class="video-widget">
<h3 id="video-title">Quảng cáo sản phẩm</h3>
<iframe id="youtube-video" src="https://www.youtube.com/embed/dQw4w9WgXcQ" allowfullscreen></iframe>
<p id="video-description">
Đây là phần giới thiệu ngắn gọn về video quảng cáo sản phẩm hoặc nội dung nhạc.
</p>
<a id="video-link" href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank">Xem trên YouTube</a>
</div>
<!-- Optional: JavaScript to dynamically update content -->
<script>
// Example of updating content dynamically
document.getElementById("video-title").textContent = "Sản phẩm tuyệt vời!";
document.getElementById("video-description").textContent = "Xem video để khám phá những tính năng nổi bật của sản phẩm này.";
document.getElementById("youtube-video").src = "https://www.youtube.com/embed/abc123xyz"; // Replace with your YouTube embed link
document.getElementById("video-link").href = "https://www.youtube.com/watch?v=abc123xyz"; // Replace with your YouTube video URL
</script>
</body>
</html>
Posted in: THIẾT KẾ WEBSITE
0 nhận xét:
Đăng nhận xét