[Fixed]-Optimizing multiple video player objects in page via using JS to display video thumbnails+play buttons instead

Below is example which is agnostic to any particular framework but i was using your notation from question.

Note that i am passing dom element itself and manifest uri to a javascript function. javascript function is initializing amp player by changing innerHtml and assigning id attribute to video tag from index variable. This variable is increasing while you clicking and playing video elements.You can modify this logic to have some other logic.

Once div tag with image is clicked, I am removing onclick handler in order to allow player intercept on click events.

{% for vid in object_list %}
<div onclick="myFunction(this, {{ vid.video_manifest }})" >
     <img src="{{ STATIC_URL }}" witdh="640" height="400">
</div>
{% endfor %}

<script>
var index = 0;

function myFunction(element, manifestUri){
index++;
element.innerHTML ="<video id=\"azuremediaplayer" + index + "\" class=\"azuremediaplayer amp-default-skin amp-big-play-centered\" tabindex=\"0\"> </video>";
var myOptions = {
            autoplay: true,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        };
        var myPlayer = amp("azuremediaplayer"+index, myOptions);
        myPlayer.src([{ src: manifestUri , type: "application/vnd.ms-sstr+xml" }, ]);
         element.removeAttribute("onclick");
}        
    </script>

Please note that auto-play is not supported for mobile devices – see https://amp.azure.net/libs/amp/latest/docs/known_issues.htm.
Script above will serve as optimization for desktop clients.
You can detect mobile users and do full rendering of video html tags for each element in a loop and initialize azure media player for each video dom element like below:

<script>

function myFunction(id, manifestUri){

var myOptions = {
            autoplay: true,
            controls: true,
            width: "640",
            height: "400",
            poster: ""
        };
        var myPlayer = amp("azuremediaplayer"+id, myOptions);
        myPlayer.src([{ src: manifestUri , type: "application/vnd.ms-sstr+xml" }, ]);


}        
    </script>

{% for vid in object_list %}

<script>myfunction('{{ vid.video_id }}','{{ vid.video_manifest }}');</script>

{% endfor %}