GRT Youtube Popup

GRT Youtube Popup is a lightweight jQuery plugin that allows you to create responsive and customizable YouTube video popups on your website. It simplifies the process of embedding YouTube videos while providing an elegant and user-friendly popup interface for viewing videos.

Features:

  1. Responsive Popups: Automatically adjust to different screen sizes and devices.
  2. Customizable Options: Customize the appearance and behavior of the YouTube popups.
  3. Lazy Loading: Load YouTube videos only when the popup is opened, optimizing page load times.
  4. Multiple Popups: Create and display multiple video popups on a single page.
  5. Fullscreen Mode: Allows users to view videos in fullscreen mode for an immersive experience.

Benefits:

  • Enhanced User Experience: Provides an intuitive and visually appealing way to showcase YouTube videos.
  • Customization: Tailor the popups to match your website’s design and style.
  • Performance Optimization: Lazy loading ensures that videos don’t impact initial page load times.
  • Accessibility: Ensures that video content is accessible and user-friendly.

Links:

Getting Started:

To get started with GRT Youtube Popup, include jQuery and the GRT Youtube Popup library in your project:

<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- GRT Youtube Popup JS and CSS -->
<link rel="stylesheet" href="path_to_grt-youtube-popup/jquery.popupoverlay.css">
<script src="path_to_grt-youtube-popup/jquery.popupoverlay.js"></script>

Advanced Examples:

  1. Basic GRT Youtube Popup:
$('.youtube-popup').popup({
  type: 'iframe',
  iframeOptions: {
    preload: false
  }
});
  1. Customize Popup Appearance:
$('.youtube-popup').popup({
  type: 'iframe',
  iframeOptions: {
    preload: false
  },
  color: '#333', // Set custom background color
  opacity: 0.9, // Adjust overlay opacity
  transition: 'all 0.3s', // Apply custom transition
  scrolllock: true // Enable scroll lock while the popup is open
});
  1. Lazy Load GRT Youtube Popup:
$('.youtube-popup').popup({
  type: 'iframe',
  iframeOptions: {
    preload: false
  },
  pagecontainer: '.container' // Specify the container for lazy loading
});
  1. Fullscreen Mode for GRT Youtube Popup:
$('.youtube-popup').popup({
  type: 'iframe',
  iframeOptions: {
    preload: false
  },
  beforeopen: function() {
    $(this).css('width', '100%').css('height', '100%');
  },
  afterclose: function() {
    $(this).css('width', '').css('height', '');
  }
});

The GRT Youtube Popup jQuery plugin simplifies the integration of YouTube videos on your website by providing responsive and customizable video popups. Whether you want to showcase video content, tutorials, or presentations, GRT Youtube Popup offers a user-friendly and visually appealing solution.