_includes/snippets/youtube.html in chulapa-jekyll-1.0.1 vs _includes/snippets/youtube.html in chulapa-jekyll-1.1.0
- old
+ new
@@ -1,6 +1,15 @@
{% assign video_id = include.id %}
+{% assign video_res = include.video_res | default: "maxresdefault" %}
<!-- Thanks to alfurka,groupboard -->
<!-- Based on https://github.com/alfurka/jekyll-embed-youtube-lazy-load -->
-<div data-src="{{ video_id }}" class="ch_ytdefer embed-responsive embed-responsive-16by9 my-2 chulapa-rounded-lg" style="background-image: url(https://img.youtube.com/vi/{{ video_id }}/maxresdefault.jpg); background-position: center; background-size: cover;">
+<div itemscope itemprop="VideoObject" itemtype="https://schema.org/VideoObject">
+<div data-src="{{ video_id }}" class="ch_ytdefer embed-responsive embed-responsive-16by9 my-2 chulapa-rounded-lg" style="background-image: url(https://img.youtube.com/vi/{{ video_id }}/{{ video_res }}.jpg); background-position: center; background-size: cover;" itemprop="thumbnailUrl" content="https://img.youtube.com/vi/{{ video_id }}/{{ video_res }}.jpg">
+<div class="d-none" itemprop="embedUrl" content="https://www.youtube-nocookie.com/embed/{{ video_id }}"></div>
<button class="ch_ytdefer_btn" aria-label="Play" style="background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmlld0JveD0iMCAwIDY4IDQ4IiB3aWR0aD0iMTAwJSI+PHBhdGggY2xhc3M9Inl0cC1sYXJnZS1wbGF5LWJ1dHRvbi1iZyIgZD0iTTY2LjUyLDcuNzRjLTAuNzgtMi45My0yLjQ5LTUuNDEtNS40Mi02LjE5QzU1Ljc5LC4xMywzNCwwLDM0LDBTMTIuMjEsLjEzLDYuOSwxLjU1IEMzLjk3LDIuMzMsMi4yNyw0LjgxLDEuNDgsNy43NEMwLjA2LDEzLjA1LDAsMjQsMCwyNHMwLjA2LDEwLjk1LDEuNDgsMTYuMjZjMC43OCwyLjkzLDIuNDksNS40MSw1LjQyLDYuMTkgQzEyLjIxLDQ3Ljg3LDM0LDQ4LDM0LDQ4czIxLjc5LTAuMTMsMjcuMS0xLjU1YzIuOTMtMC43OCw0LjY0LTMuMjYsNS40Mi02LjE5QzY3Ljk0LDM0Ljk1LDY4LDI0LDY4LDI0UzY3Ljk0LDEzLjA1LDY2LjUyLDcuNzR6IiBmaWxsPSIjMjEyMTIxIiBmaWxsLW9wYWNpdHk9IjAuOCI+PC9wYXRoPjxwYXRoIGQ9Ik0gNDUsMjQgMjcsMTQgMjcsMzQiIGZpbGw9IiNmZmYiPjwvcGF0aD48L3N2Zz4="); position: absolute; border: 0px; background-color: transparent; left: calc(50% - 73px/2); top: calc(50% - 52px/2); width: 73px; height: 52px; pointer-events: none;"></button>
</div>
+</div>
+<!-- Load script only if needed -->
+<script>
+if(null==(ch_defer_script=document.getElementById("ch_ytdeferScript"))){var e=document,t=e.createElement("script");t.src="https://cdn.jsdelivr.net/gh/dieghernan/chulapa@master/assets/js/ch_ytdefer/ch_ytdefer.min.js",t.id="ch_ytdeferScript",e.body.appendChild(t)}else console.log("Chulapa YouTube Defer already loaded");
+</script>
+