b43cb22dc1
- Replace YouTube iframes with lightweight facade (thumbnail + play button) - Load real iframe only on user click - Reduces TBT by ~2000ms - Works with mu-plugin allow-unfiltered-html.php - Filter priority 101 (after RCP) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
56 lines
1.9 KiB
PHP
56 lines
1.9 KiB
PHP
<?php
|
|
|
|
declare(strict_types=1);
|
|
|
|
namespace ROITheme\Public\YoutubeFacade\Infrastructure\Ui;
|
|
|
|
/**
|
|
* Renders YouTube facade HTML (thumbnail + play button)
|
|
*
|
|
* PageSpeed Optimization:
|
|
* - Shows YouTube thumbnail image (lazy-loaded)
|
|
* - Displays play button overlay
|
|
* - Real iframe loads only on user click (via JS)
|
|
* - Reduces TBT by ~2000ms
|
|
*
|
|
* @package ROITheme\Public\YoutubeFacade
|
|
* @since 1.0.6
|
|
*/
|
|
final class YoutubeFacadeRenderer
|
|
{
|
|
/**
|
|
* Render facade HTML for a YouTube video
|
|
*
|
|
* @param string $videoId YouTube video ID
|
|
* @return string Facade HTML
|
|
*/
|
|
public function render(string $videoId): string
|
|
{
|
|
$videoId = esc_attr($videoId);
|
|
|
|
// Use maxresdefault with fallback to hqdefault
|
|
// YouTube provides thumbnails at: maxresdefault, sddefault, hqdefault, mqdefault, default
|
|
$thumbnailUrl = "https://i.ytimg.com/vi/{$videoId}/maxresdefault.jpg";
|
|
|
|
$html = <<<HTML
|
|
<div class="youtube-facade video-wrapper" data-video-id="{$videoId}">
|
|
<img
|
|
class="youtube-facade__thumbnail"
|
|
src="{$thumbnailUrl}"
|
|
alt="Video thumbnail"
|
|
loading="lazy"
|
|
onerror="this.src='https://i.ytimg.com/vi/{$videoId}/hqdefault.jpg'"
|
|
/>
|
|
<button class="youtube-facade__play" aria-label="Play video">
|
|
<svg viewBox="0 0 68 48" width="68" height="48">
|
|
<path class="youtube-facade__play-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"/>
|
|
<path class="youtube-facade__play-icon" d="M 45,24 27,14 27,34" fill="#fff"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
HTML;
|
|
|
|
return $html;
|
|
}
|
|
}
|