Struggling to showcase a list of videos from my server, here's the issue I'm encountering and the layout of the app.
https://i.stack.imgur.com/HWVt3.png
This is the code snippet in HTML:
<ion-list>
<button ion-item *ngFor="let video of recentVideos">
<ion-thumbnail item-left (click)="openVideo(video)">
<video>
<source [src]="video.fileUrl" type="video/mp4">
</video>
</ion-thumbnail>
<div (click)="openVideo(video)">
<h2>{{ video.title }}</h2>
<p>{{ video.description }}</p>
</div>
<button ion-button clear item-right icon-only (click)="showPopoverMenu($event, video)">
<ion-icon name="more"></ion-icon>
</button>
</button>
</ion-list>
Confused by the display issue. The video plays properly, utilizing the ionic native streaming media plugin. Any insights on why the video appears like this?