I have no idea where the problem comes from, a similar problem happens with the like button.
I've left my code below, if you want I can post it in more detail {% for post_item in post_items %} doesn't seem to work as it should, but whyyyy?

my.html

    {% for post_item in post_items %}
    <ul style="padding-inline-start: 10px;" id="dataList_post">
      <li >
      <div>            

        <div  style="min-height: 174px; border: 1px solid #f0f0f0; border-width: 2px; border-radius: 20px; max-width: 600px; height: auto; margin-right: 100px;">
            <div >
                {% if post_item.user.profile.avatar %}
                <a style="text-decoration: none; color: black;" href="{% url 'users' post_item.user %}"><img src="{{ post_item.user.profile.avatar.url }}" style="border-radius: 100%; width: 48px; height: 48px;" alt=""></a>
                {% else %}
                <a style="text-decoration: none; color: black;" href="{% url 'users' post_item.user %}"><img src="{% static 'img/default.png' %}" style="border-radius: 100%; width: 48px; height: 48px;"  alt=""></a>
                {% endif %}                 
            </div>
            <div >
              <a style="text-decoration: none; color: black;" href="{% url 'users' post_item.user %}">
                <h5  style="font-family: cursive;"><b>{{ post_item.user.username }}</b></h5>
              </a>
            </div>
            
            <div >
              <a style="text-decoration: none; color:black;" href="{{ post_item.get_absolute_url }}">
                <span>{{ post_item.caption }}</span>
                <br>
                </a>
              {% for tag in post_item.tags.all %}<a href="{{ tag.get_absolute_url }}"><b>#{{ tag }}</b></a>{% endfor %} 
              <small  style="float: right;">{{ post_item.posted | naturaltime }}</small>
            </div>

          {% if post_item.content.first.file.name|slice:"-3:" == 'jpg' or post_item.content.first.file.name|slice:"-3:" == 'png' %}
            
              <div >
                <a data-toggle="dropdown"><img style="max-height: 560px; max-width: 560px;min-width:560px;  border-radius: 10px;"  src="{{ post_item.content.first.file.url }}" alt="Placeholder image"></a>
                  <ul >            
                    <img style="max-height: 900px; max-width: 1200px;"  src="{{ post_item.content.first.file.url }}" alt="Placeholder image">
                  </ul>      
                </div>  

          {% elif post_item.content.first.file.name|slice:"-3:" == 'mp4' %}

              <video  style="max-height: 600px;"  controls="controls" preload="metadata">
                <source src="{{ post_item.content.first.file.url }}#t=0.5" type="video/mp4">        
              </video> 

          {% else %}

          {% endif %}      
        </div>
      </div>
      <hr>
    </li>
    </ul>
    
    {% endfor %}
      <a style="margin-left:300px; border-radius:100px;background-image: url('img/more.png'); "  id="moreButton_post" type="button" onclick="showMore()"><img src="{% static 'img/more.png' %}"></a>
</div>

    
      <script>
        document.querySelector('video').setAttribute("controlslist", "nodownload");
      </script>
    {% endblock %}

CodePudding user response：

querySelector() returns the first item that matches

querySelectorAll() returns an array of all objects that match

to update the attributes on all videos, you'll want to use something like:

nodes = document.querySelectorAll('video')
for (var i=0; i<nodes.length; i  ) {
  node = nodes[i];
  node.setAttribute("controlslist", "nodownload");
}