Can Stream Thru S3 Bucket But Can't Stream Through Cloudfront

I’m not very technical and so I have been following online tutorials to get HLS streaming set up through Cloudfront.

I have managed to get a HLS video playing (on my WP website with a HTML5 player) if I access the S3 Bucket link directly.

But the moment I enter my cloudfront URL, it doesn’t play. Spinner keeps spinning.

But if I turn the “Restrict Viewer Access” off (Self signed) from within the CF settings, then the videos play.
If I turn it back on, it doesn’t play anymore.

I’m not sure if it has anything to do with Bucket Policy or CORS config or Permissions or Origin Access Identity or anything else, but I am looking for other things to check and try to make it work.

Any ideas?

Appreciate the help,

JH

My Bucket Policy…

{
"Version": "2008-10-17",
"Id": "My_ID",
"Statement": [

    {
        "Sid": "2",
        "Effect": "Allow",
        "Principal": {
            "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity A3RY269TF8KYTY"
        },
        "Action": "s3:GetObject",
        "Resource": "arn:aws:s3:::my_bucket/*"
    }
]
}