Social embeds - need rework

This commit is contained in:
2024-07-16 22:16:11 +02:00
parent b3134c249e
commit 65bb29f36b
3 changed files with 44 additions and 60 deletions

View File

@ -65,7 +65,7 @@
<h2 class="text-blue-950 font-semibold text-2xl m-5">Socials</h2>
{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
<script src= "https://player.twitch.tv/js/embed/v1.js"></script>
<div id="twitch-player" class="h-64 rounded overflow-hidden"></div>
<div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div>
<script type="text/javascript">
var options = {
width: "100%",
@ -78,10 +78,10 @@
</script>
{% call sc::social_card_end() %}
{% call sc::social_card_start("tiktok", "Highlight can be found on <em>TikTok</em>") %}
{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
<!-- STYLES needed to overwrite tiktok embed css -->
<blockquote
class="overflow-hidden p-0 m-0 tiktok-embed bg-pink-200"
class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200"
cite="https://www.tiktok.com/@michalvankodev"
data-unique-id="michalvankodev"
data-embed-from="embed_page"
@ -94,6 +94,26 @@
</blockquote>
<script async src="https://www.tiktok.com/embed.js"></script>
{% call sc::social_card_end() %}
{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
<!-- TODO create our own youtube widget which will populate this window on build -->
<iframe
class="h-64 aspect-video"
id="ytplayer"
type="text/html"
width="100%"
height="100%"
src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white"
frameborder="0"
allowfullscreen
></iframe>
{% call sc::social_card_end() %}
{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
<blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script>
{% call sc::social_card_end() %}
</section>
<section class="twitch-stream-promo">