shared: Add blurred backdrop for YouTube videos

This commit is contained in:
Markus Koch 2020-01-02 22:38:11 +01:00
parent 8754b017b8
commit faaa3a8ecb

View File

@ -6,6 +6,7 @@
define('HOME_PAGE', 'blog'); // Entry page (and link for logo) define('HOME_PAGE', 'blog'); // Entry page (and link for logo)
define('CACHE_POSTS_TTL', 3600); // Time to cache the posts list (1h) define('CACHE_POSTS_TTL', 3600); // Time to cache the posts list (1h)
define('POSTS_BASE', "/b/"); // Root directory of the posts (relative) define('POSTS_BASE', "/b/"); // Root directory of the posts (relative)
define('YT_PREVIEW', "/b/pimg-yt/"); // Directory containing local copies of the youtube thumbnails
define('POSTS_ROOT', $_SERVER['DOCUMENT_ROOT'] . POSTS_BASE); // Root directory of the posts (absolute) define('POSTS_ROOT', $_SERVER['DOCUMENT_ROOT'] . POSTS_BASE); // Root directory of the posts (absolute)
define('POSTS_PAGE_SIZE', 10); // Numbers of posts on a page define('POSTS_PAGE_SIZE', 10); // Numbers of posts on a page
@ -124,6 +125,7 @@
if ($matches) { if ($matches) {
$youtube['embed'] = "https://www.youtube.com/embed/" . $matches[1]; $youtube['embed'] = "https://www.youtube.com/embed/" . $matches[1];
$youtube['link'] = "https://www.youtube.com/watch?v=" . $matches[1]; $youtube['link'] = "https://www.youtube.com/watch?v=" . $matches[1];
$youtube['vid'] = $matches[1];
} }
echo '<videoframe><div class="videoframe" style="width:' . $width . 'px;height:' . $width*9/16 . 'px">'; echo '<videoframe><div class="videoframe" style="width:' . $width . 'px;height:' . $width*9/16 . 'px">';
@ -132,7 +134,7 @@
if (opted_in('y')) { if (opted_in('y')) {
echo '<iframe width="100%" height="100%" src="' . $url . '" frameborder="0" allowfullscreen></iframe>'; echo '<iframe width="100%" height="100%" src="' . $url . '" frameborder="0" allowfullscreen></iframe>';
} else { } else {
echo "<table border=0 style='height:100%;width:100%'><tr><td style='text-align:center;'>Embedded content has been disabled to protect your privacy.<br><br><br><strong><form action='' method='post'><input type='hidden' name='optin-once' value='y' /><input type='submit' value='Click here to load the videos on this site once,'/></form></strong><br><br><strong><a href='/?p=privacy-controls'>or click here to allow them permanently,</a><br><br><a href=\"" . $youtube['link'] . "\">" . "or click here to watch the video on YouTube:<br>" . $youtube['link'] . "</a></strong><br><br><br>Please note that by enabling this video, data is transferred <br>to YouTube LLC, and is subject to their privacy policy.</td></tr></table>"; echo "<div style='width:100%;height:100%;background-color:black;background-image: url(" . YT_PREVIEW . $youtube['vid'] . ".jpg);background-size:contain;'><table border=0 style='height:100%;width:100%;backdrop-filter:blur(3px);background-color:rgba(0,0,0,0.55);text-shadow:1px 1px black;'><tr><td style='text-align:center;'>Embedded content has been disabled to protect your privacy.<br><br><br><strong><form action='' method='post'><input type='hidden' name='optin-once' value='y' /><input type='submit' value='Click here to load the videos on this site once,'/></form></strong><br><br><strong><a href='/?p=privacy-controls'>or click here to allow them permanently,</a><br><br><a href=\"" . $youtube['link'] . "\">" . "or click here to watch the video on YouTube:<br>" . $youtube['link'] . "</a></strong><br><br><br>Please note that, by enabling this video, data is transferred <br>to YouTube LLC, and is subject to their privacy policy.</td></tr></table></div>";
} }
} else { } else {
// TODO: HTML5 video // TODO: HTML5 video