Lazy Video

• YOOtheme Pro: Version 4.1 or higher
• Joomla!: Version 4.3 or higher
• WordPress: Version 6.0 or higher
• PHP: Version 8.1 or higher

The Lazy Video element is compatible with the latest technologies and is continuously updated to support new versions, including PHP 8.3, Joomla 5, and the latest YOOtheme Pro version, among others.

Aspect Ratio of 16:9 ("Sixteen-by-Nine" and "Sixteen-to-Nine") which is also known as High Definition (HD) became leading aspect ratio since the start of the 21st century. It is the international standard format of HDTV, non-HD digital television and analog widescreen television PALplus. Today many digital video cameras have the capability to record in High Definition format, and it is the only widescreen aspect ratio natively supported by the DVD standard.

• 640 x 360 (nHD, near High Definition)
• 854 x 480 (FWVGA, Full Wide Video Graphics Array)
• 960 x 540 (qHD, Quarter High Definition)
• 1024 x 576 (WSVGA, Widescreen Super Video Graphics Array)
• 1280 x 720 (HD, High Definition / WXGA, Widescreen Extended Graphics Array)
• 1366 x 768 (FWXGA, Full Widescreen Extended Graphics Array)
• 1600 x 900 (HD+, High Definition Plus)
• 1920 x 1080 (FHD, Full High Definition; Recommended)
• 2048 x 1152 (QWXGA, Quad Wide Extended Graphics Array)
• 2560 x 1440 (QHD, Quad High Definition)
• 3200 x 1800 (WQXGA+, Wide Quad Extended Graphics Array Plus)
• 3840 x 2160 (UHD, Ultra High Definition)
• 5120 x 2880 (UHD+, Ultra High Definition Plus)
• 7680 x 4320 (FUHD, Full Ultra High Definition)

The 9:16 aspect ratio is integral to the format of YouTube Shorts, a platform designed for short, engaging vertical videos that are optimized for mobile viewing. This aspect ratio makes full use of the vertical screen space on smartphones, offering an immersive and full-screen experience for viewers. It's particularly popular among content creators and audiences who prefer consuming media on-the-go, making it an essential format for modern video content on platforms like YouTube.

• 360 x 640 (nHD, near High Definition)
• 480 x 854 (FWVGA, Full Wide Video Graphics Array)
• 540 x 960 (qHD, Quarter High Definition)
• 576 x 1024 (WSVGA, Widescreen Super Video Graphics Array)
• 720 x 1280 (HD, High Definition)
• 768 x 1366 (not a standard resolution name)
• 900 x 1600 (not a standard resolution name)
• 1080 x 1920 (FHD, Full High Definition; Recommended for YouTube Shorts)
• 1152 x 2048 (QWXGA, Quad Wide Extended Graphics Array)
• 1440 x 2560 (QHD, Quad High Definition)
• 1800 x 3200 (WQXGA+, Wide Quad Extended Graphics Array Plus)
• 2160 x 3840 (UHD, Ultra High Definition, commonly known as Vertical 4K)

The reason autoplay videos are muted in modern browsers is due to recent policy changes aimed at enhancing the user experience and reducing unsolicited disruptions. Major browsers like Google Chrome, Firefox, and Safari have implemented strict rules regarding autoplay videos to prevent them from playing sound automatically when a webpage loads.

This change is primarily driven by user feedback, as unexpected audio from autoplay videos can be intrusive and distracting, especially when browsing in public or quiet environments. To comply with these policies, videos that autoplay on webpage load are required to be muted.

If sound is essential for your video content, you can encourage users to interact with the video (like clicking a play button) to enable sound. This approach aligns with browser policies and respects the user's choice to experience audio content.

The autoplay inview functionality is designed to automatically start playing a video as soon as it enters the viewer's screen (viewport). This ensures that the video only plays when it is visible to the user, enhancing engagement and efficiency. When the viewer scrolls and the video moves out of view, the playback will pause, conserving resources and improving user experience. Once the video re-enters the viewer's screen, the playback resumes from where it was paused, providing a seamless viewing experience.

The "Pause Video" option ensures that any video with this setting will automatically pause when it becomes hidden from view, such as when placed inside a modal that is closed or in a section that is toggled off-screen. Importantly, this feature is automatically enabled when you use the autoplay or muted options for your video. This means that videos set to autoplay or those that are muted will pause their playback when they are not visible, and resume once they come back into view. This functionality helps in conserving resources and offers a more seamless and intuitive viewing experience, as it prevents videos from playing unseen in the background.

Yes, you have the option to select a custom thumbnail for both YouTube and Vimeo videos. This feature allows you to personalize the appearance of your video element before it's played, giving you greater control over the visual impact and branding of your content. By choosing a custom thumbnail, you can ensure that the first impression aligns with the video's message or theme, as well as the overall aesthetic of your website.

Absolutely, users have the flexibility to select the default thumbnail resolution for their videos. This feature allows for optimization based on specific requirements or preferences. The available resolution options are:

For YouTube:

• "Maximum (1280px)": "maxresdefault"
• "High (640px)": "sddefault"
• "Medium (480px)": "hqdefault"
• "Fair (320px)": "mqdefault"
• "Low (120px)": "default"

For Vimeo:

• "Maximum (640px)": "thumbnail_large"
• "Medium (200px)": "thumbnail_medium"
• "Low (100px)": "thumbnail_small"

These options provide a range of resolutions to cater to different display needs, ensuring that the thumbnail quality can be tailored to match the aesthetics and performance criteria of the website.

You can download default YouTube video thumbnails using a service like youtube-thumbnail-grabber.com, and for Vimeo video thumbnails, a service like softr.io can be utilized.

It's important to be mindful of copyright and usage rights when downloading and using thumbnails from the original videos. Thumbnails are considered part of the copyrighted content. Therefore, ensure you have the right to use the image, especially if you plan to use it for commercial purposes, public display, or distribution.

Yes, it is supported. By default, all thumbnail images, including default video thumbnails, are lazy loaded. However, this behavior can be adjusted in the element settings to allow images to load eagerly instead of lazily. This flexibility ensures that you can optimize loading behavior based on your specific needs or the performance goals of your website.

The issue with broken default thumbnails for Vimeo videos often arises due to the privacy settings of the video on Vimeo. For the default thumbnail to display correctly, the Vimeo video needs to be set to 'public'.

When a video on Vimeo is marked as private or has restricted access, its thumbnail is not accessible to external sites or applications. This is a part of Vimeo's privacy protection measures. If the video is not public, external requests for the thumbnail – such as those made by a website trying to embed or display the video – will not be successful, leading to a broken thumbnail image.

To ensure that your Vimeo video's default thumbnail appears correctly, check the video's privacy settings on Vimeo and set it to public. This allows the thumbnail to be accessible and displayed properly in other applications or on websites, including within YOOtheme Pro elements.

If a video lacks a thumbnail or the desired resolution is unavailable (among other cases), a fallback image will be displayed in place of the original video thumbnail. Should the thumbnail fallback field be left empty, the default image placeholder provided by the builder will be utilized. This functionality remains inactive when a custom thumbnail is employed.

1. playsinline=1: This enables inline playback on mobile devices, meaning the video plays directly within the page rather than opening in fullscreen mode automatically.
2. dnt=1 (Do Not Track): This parameter ensures that Vimeo does not track the viewing behavior of users for videos embedded on your site. It's a privacy-focused feature.
3. title=0: This removes the video title from the top of the player.
4. byline=0: This hides the byline (which typically contains the creator's name) from the video player.
5. portrait=0: This removes the account's portrait icon from the player.
6. pip=0 (Picture in Picture): This disables the Picture in Picture mode, which would otherwise allow users to watch the video in a small floating window while browsing other sites.
7. keyboard=0: This disables keyboard inputs for controlling the video player, such as play, pause, and seeking.

It's important to note that these parameters are unchangeable in the context you're referring to. They are preset and cannot be modified, ensuring a consistent behavior for the embedded Vimeo videos according to these settings.

For more detailed information and a full list of available parameters for the Vimeo embedded player, you can visit the official Vimeo documentation on embed parameters at their Embedded Player Parameters guide. This guide provides comprehensive details on all the customization options available for embedding Vimeo videos, helping you understand how to tailor the video player to best fit your needs within the constraints of the available parameters.

1. playsinline=1: This parameter enables inline playback for iOS devices. When set to 1, videos will play in the page rather than entering fullscreen mode automatically on iOS devices.
2. rel=0: This parameter controls whether videos from other channels are suggested at the end of the video. When set to 0, only videos from the same channel will be shown in the suggested videos.
3. disablekb=1: This disables keyboard controls. When set to 1, viewers won't be able to use keyboard shortcuts for controlling playback of the video.
4. enablejsapi=1: This parameter enables the JavaScript API for the embedded player. When set to 1, it allows you to control the YouTube player using JavaScript.
5. origin: This is a security feature for the JavaScript API. You provide the domain of your site to ensure that the API only responds to requests from your site.

For more detailed information on YouTube embed parameters, you can visit the official documentation page for YouTube's embedded player parameters. This documentation provides comprehensive details on all available customization options for embedding YouTube videos.

Yes, this method is particularly advantageous for those prioritizing user privacy. The primary benefit of using youtube-nocookie.com is that it limits YouTube's ability to track viewer behavior via cookies unless the viewer interacts with the video. This approach is more privacy-conscious and is especially beneficial for complying with various data protection and privacy regulations, like the GDPR in Europe. Additionally, when embedding YouTube videos, the default video URL is automatically converted to a youtube-nocookie.com URL to ensure this enhanced privacy standard is maintained.

In compliance with the General Data Protection Regulation (GDPR), our approach to cookie handling for videos is designed to respect user privacy. Before a user clicks on the play button—unless the autoplay option is enabled—no cookies are set. This is because the Lazy Video element does not load any content initially; it merely prepares the iframe.

For YouTube videos, we use the youtube-nocookie.com domain. This domain is specifically designed to limit the use of cookies. When a video is processed through youtube-nocookie.com, only essential cookies necessary for video playback are loaded. These cookies do not track personal information, making them GDPR compliant.

Vimeo videos, on the other hand, are loaded with the "Do Not Track" (DNT=1) parameter enabled. This means that Vimeo will not use cookies for tracking purposes or collect personal data when this parameter is active. Vimeo may still set essential cookies needed for video playback, but these do not involve personal data collection or user tracking, aligning with GDPR guidelines.

In both cases, our focus is on minimizing cookie usage to essential functionality, ensuring that user privacy is respected and GDPR requirements are met.

Yes, the Lazy Video element offers flexible options for choosing a play icon. Users have the choice of selecting from one of three predefined UIkit play icons, catering to a variety of aesthetic preferences. Additionally, for those seeking a more customized approach, there is the option to select a custom icon from the installed icon sets available on your website. This feature allows for greater personalization and ensures that the play icon can be seamlessly integrated with the overall design of the website.