如何实现点击Font Awesome图标在900*506自定义窗口播放YouTube视频

Alright, let's get this working for you. You already have your background (black.jpg) and overlay image (1.jpg) in place, so we'll build on that to add the video icon trigger and custom-sized YouTube player window.

Step 1: HTML Structure #

First, let's lay out the core elements: the background container, your overlay image, the Font Awesome video icon, and a hidden modal window for the YouTube player.

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Include Font Awesome (use local files or the official CDN) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- Background container with black.jpg -->
    <div class="background-container">
        <!-- Your overlay image 1.jpg -->
        <img src="1.jpg" alt="Overlay Image" class="overlay-image">
        
        <!-- Clickable Font Awesome video icon -->
        <div class="video-icon" id="videoTrigger">
            <i class="fa-solid fa-play-circle fa-3x"></i>
        </div>
    </div>

    <!-- Custom YouTube player window (hidden by default) -->
    <div class="video-modal" id="videoModal">
        <!-- Close button -->
        <button class="close-btn" id="closeModal">&times;</button>
        <!-- YouTube iframe - replace YOUR_VIDEO_ID with your actual video ID -->
        <iframe 
            width="100%" 
            height="100%" 
            src="https://www.youtube.com/embed/YOUR_VIDEO_ID?autoplay=1" 
            title="YouTube video player" 
            frameborder="0" 
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
            allowfullscreen>
        </iframe>
    </div>

    <script src="script.js"></script>
</body>
</html>

Step 2: CSS Styling #

This handles the background layout, overlay image positioning, icon styling, and the 900x506 modal window.

/* Reset default browser styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden; /* Prevent scrolling when modal is open */
}

/* Background container with black.jpg */
.background-container {
    width: 100%;
    height: 100%;
    background-image: url('black.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

/* Overlay image 1.jpg */
.overlay-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Adjust width/height to fit your design */
    width: 80%;
    height: auto;
}

/* Font Awesome video icon styling */
.video-icon {
    position: absolute;
    bottom: 30px;
    right: 30px;
    color: #ffffff;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.video-icon:hover {
    transform: scale(1.1);
}

/* Custom 900x506 modal window */
.video-modal {
    display: none; /* Hidden by default */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 506px;
    background-color: #000000;
    border: 2px solid #ffffff;
    z-index: 1000;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
}

/* Close button for modal */
.close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #ffffff;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    outline: none;
}

.close-btn:hover {
    color: #cccccc;
}

/* YouTube iframe fills the modal */
.video-modal iframe {
    width: 100%;
    height: 100%;
}

Step 3: JavaScript Logic #

This handles showing/hiding the modal and pausing the video when closed.

// Grab elements from the DOM
const videoTrigger = document.getElementById('videoTrigger');
const videoModal = document.getElementById('videoModal');
const closeModal = document.getElementById('closeModal');

// Show modal when video icon is clicked
videoTrigger.addEventListener('click', () => {
    videoModal.style.display = 'block';
});

// Hide modal and pause video when close button is clicked
closeModal.addEventListener('click', () => {
    videoModal.style.display = 'none';
    // Reset iframe src to stop the video
    const iframe = videoModal.querySelector('iframe');
    iframe.src = iframe.src;
});

// Optional: Hide modal when clicking outside the iframe area
window.addEventListener('click', (e) => {
    if (e.target === videoModal) {
        videoModal.style.display = 'none';
        const iframe = videoModal.querySelector('iframe');
        iframe.src = iframe.src;
    }
});

Quick Tips: #

• Replace YOUR_VIDEO_ID in the iframe src with your actual YouTube video ID (found in the video's URL).
• Adjust the video icon's position (bottom/right values in CSS) to fit your layout.
• The autoplay=1 parameter starts the video automatically—note some browsers block autoplay until the user interacts with the page first.

内容的提问来源于stack exchange，提问作者shubham sharma