<style>
/* <link rel="stylesheet" href="https://unrealdevhacks.com/patreon/css/modal_youtube.css?v=1"> */

   .udh_youtube_popup_modal {
		display: block; /* Hidden by default */
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
		justify-content: center;
		align-items: center;
		z-index: 1000; /* Make sure it's above other content */
	}

	.udh_youtube_popup_modal_content_wrapper {
		position: relative;
		width: 100%; /* Set width to the full extent */
		max-width: 1042px; /* Maximum width */
		max-height: 596px; /* Maximum height */
		height: auto; /* Auto to maintain aspect ratio */
		aspect-ratio: 1042 / 596; /* Keep the 1042:596 aspect ratio */
		background: white;
		overflow: hidden; /* Hide overflow */
		border-radius: 10px; /* Round corners */
	}

	.udh_youtube_popup_modal_content {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0px;
		border-radius: 0px;
	}

	.udh_youtube_popup_modal_close {
		position: absolute;
		top: 10px;
		right: 10px;
		width: 50px;
		height: 50px;
		background: white;
		border: none;
		border-radius: 50%;
		padding: 10px;
		cursor: pointer;
	}

	.udh_youtube_popup_modal_content iframe {
		width: 100%;
		height: 100%;
		border: none; /* No border around iframe */
	}


    .udh_image_button_youtube {
		content: url('https://unrealdevhacks.com/mt-content/uploads/2024/04/youtube_button_01_normal.png'); 
        position: absolute; /* To place it within the background div */
        top: 50%; /* Center vertically */
        left: 50%; /* Center horizontally */
        transform: translate(-50%, -50%); /* Adjust to be fully centered */
        border: none; /* No border */
        background: none; /* Transparent background */
        cursor: pointer; /* Cursor changes to indicate it's a button */
    }

    /* Change the image on hover */
    .udh_image_button_youtube img {
        transition: opacity 0.2s; /* Smooth transition for hover effect */
    }

    /* Hover state to change the image */
    .udh_image_button_youtube:hover img {
        content: url('https://unrealdevhacks.com/mt-content/uploads/2024/04/youtube_button_01_hover.png'); /* Change image on hover */
    }

</style>