Opening YouTube Videos on a Custom Button Click Using jQuery

Welcome to See Coding!

At See Coding, we simplify web development through practical tutorials and examples. Today’s post shows how to create a YouTube video modal that opens on a button click using jQuery. Perfect for websites, portfolios, or e-commerce platforms!

Step-by-Step Guide to Implementing a YouTube Modal

1. HTML Structure

Here’s a basic structure for the button and modal. (Replace VIDEO_ID with your YouTube video’s unique ID.)

?

1	<button class="open-video" data-video="https://www.youtube.com/embed/VIDEO_ID">Play Video</button>

2. CSS for Modal Styling

This CSS ensures your modal is responsive and visually appealing.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.video-modal {     display: none;     position: fixed;     top: 0;     left: 0;     width: 100%;     height: 100%;     background-color: rgba(0, 0, 0, 0.8);     justify-content: center;     align-items: center; } .modal-content {     width: 600px;     max-width: 90%;     background-color: #fff;     padding: 15px;     border-radius: 8px; }

3. jQuery for Button Click and Video Control

This script dynamically loads the video and handles modal events.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$(document).ready(function () {     $(".open-video").on("click", function () {         const videoUrl = $(this).data("video");         $("#videoIframe").attr("src", videoUrl + "?autoplay=1");         $("#videoModal").fadeIn();     });       $(".close, #videoModal").on("click", function () {         $("#videoIframe").attr("src", "");         $("#videoModal").fadeOut();     });       $(".modal-content").on("click", function (e) {         e.stopPropagation();     }); });

---

Engage With Us!

At See Coding, we love hearing from our readers.
💡 Have ideas for improvement?
📩 Need help customizing the code?
👉 Comment below or use our Conatct us.

WooCommerce – remove payment method from emails

Question: How can we remove payment method from emails in woocommerce?

Answer: We can use below woocommerce filter to remove payment method from emails in woocommerce.

?

1 2 3 4 5 6

add_filter( 'woocommerce_get_order_item_totals', 'custom_woocommerce_get_order_item_totals' );   function custom_woocommerce_get_order_item_totals( $totals ) {   unset( $totals['payment_method'] );   return $totals; }