only embed youtube vids on AC power

app/static/js/scripts.js

@@ -10,7 +10,14 @@ if(!setTheme) {
 
 // fires after DOM is ready for manipulation
 document.addEventListener("DOMContentLoaded", function () {
-    setupYouTubeLazyLoad();
+    if(navigator.getBattery) {
+        navigator.getBattery().then(function(battery) {
+            // Only load youtube videos in teasers if there is plenty of power available
+            if (battery.charging) {
+                setupYouTubeLazyLoad();
+            }
+        });
+    }
     setupCommunityNameInput();
     setupShowMoreLinks();
     setupConfirmFirst();

app/static/styles.css

@@ -922,7 +922,6 @@ div.navbar {
   /* 16:9 aspect ratio */
   height: 0;
   overflow: hidden;
-  background-color: #000;
 }
 .post_teaser_video_preview .video-wrapper img {
   position: absolute;
@@ -932,6 +931,7 @@ div.navbar {
   height: 100%;
   object-fit: cover;
   cursor: pointer;
+  border-radius: 5px;
 }
 .post_teaser_video_preview .video-wrapper iframe {
   position: absolute;

app/static/styles.scss

@@ -514,17 +514,17 @@ div.navbar {
     padding-bottom: 56.25%; /* 16:9 aspect ratio */
     height: 0;
     overflow: hidden;
-    background-color: #000;
   }
 
   .video-wrapper img {
-      position: absolute;
+    position: absolute;
-      top: 0;
+    top: 0;
-      left: 0;
+    left: 0;
-      width: 100%;
+    width: 100%;
-      height: 100%;
+    height: 100%;
-      object-fit: cover;
+    object-fit: cover;
-      cursor: pointer;
+    cursor: pointer;
+    border-radius: 5px;
   }
 
   .video-wrapper iframe {

app/templates/post/post_teaser/_video.html

@@ -17,17 +17,9 @@
     </h3>
     <span class="author small">{% if show_post_community -%}<a href="/c/{{ post.community.link() }}" aria-label="{{ _('Go to community %(name)s', name=post.community.name) }}">c/{{ post.community.name }}</a>{% endif -%}
                     by {{ render_username(post.author) }} <time datetime="{{ post.last_active }}">{{ arrow.get(post.last_active if sort == 'active' else post.posted_at).humanize(locale=locale) }}</time></span>
-    <div class="post_teaser_video_preview">
+    {% if not low_bandwidth %}
-        <div class="max_width_512">
+        <div class="post_teaser_video_preview">
-            {% if low_bandwidth %}
+            <div class="max_width_512">
-                {% if post.image_id -%}
-                    <div class="post_teaser_video_preview{{ ' lbw' if low_bandwidth }}">
-                        <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, autoplay='true') }}" rel="nofollow ugc" aria-label="{{ _('Read article') }}"><span class="fe fe-video"></span>
-                            <img src="{{ post.image.medium_url() }}" alt="{{ post.image.alt_text if post.image.alt_text else '' }}" loading="lazy" class="{{ ' blur' if blur_content }}" /></a>
-                    </div>
-
-                {% endif -%}
-            {% else %}
                 {% if post.url.endswith('.mp4') or post.url.endswith('.webm') -%}
                     <p>
                         <video class="responsive-video" controls preload="{{ 'none' if low_bandwidth else 'auto' }}" {{ 'autoplay muted' if autoplay }} {{ 'loop' if post.community.loop_videos() }}>
@@ -44,14 +36,16 @@
                 {% endif -%}
                 {% if 'youtube.com' in post.url -%}
                     <div class="video-wrapper" data-src="https://www.youtube.com/embed/{{ post.youtube_embed() }}">
-                        <img src="https://img.youtube.com/vi/{{ post.youtube_embed(rel=False) }}/hqdefault.jpg" alt="Video Thumbnail">
+                        <a href="{{ url_for('activitypub.post_ap', post_id=post.id, sort='new' if sort == 'active' else None, autoplay='true') }}" rel="nofollow ugc" aria-label="{{ _('Read article') }}">
+                            <img src="https://img.youtube.com/vi/{{ post.youtube_embed(rel=False).replace('v=', '').replace('?', '') }}/hqdefault.jpg" alt="Video Thumbnail" width="512" height="288">
+                        </a>
                     </div>
                 {% endif -%}
                 {% if 'videos/watch' in post.url -%}
                     <div style="padding-bottom: 56.25%; position: relative;"><iframe style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" src="{{ post.peertube_embed() }}" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"  width="100%" height="100%" frameborder="0"></iframe></div>
                 {% endif -%}
-            {% endif -%}
+            </div>
         </div>
-    </div>
+    {% endif -%}
     {% include "post/post_teaser/_utilities_bar.html" %}
 </div>