iPhoneでYouTubeの埋め込み動画を表示させたい

発生している問題・エラーメッセージ

初めて質問します。

Wordpress上で、YouTubeの動画を埋め込んだページを作ったのですが、iPhoneで見るとサムネイルが表示がされません。
iPhoneで見ると、動画のある空間だけ隙間があいて、動画のサムネイルが表示されません。PC、Andoridのスマートフォンでは正常に動画が表示されています。iPhoneでYouTubeの動画が出ない時の対処方がありましたら教えていただきたいです。


### 該当のソースコード
【HTML】
<ul class="scroll_lst">
       <li class="scroll_item">
           <a href="" class="scroll_item_inr">
               <div class="scroll_item_thum">
                  <iframe width="560" height="315" src="https://www.youtube.com/embed/LDzTxnrDJyg" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
               </div>   
           </a>
       </li>
      <li class="scroll_item">
           <a href="" class="scroll_item_inr">
               <div class="scroll_item_thum">
                    <iframe width="560" height="315" src="https://www.youtube.com/embed/BwC5ShM7SgU" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
               </div>
           </a>
       </li>
      <li class="scroll_item">
           <a href="" class="scroll_item_inr">
               <div class="scroll_item_thum">
                   <iframe width="560" height="315" src="https://www.youtube.com/embed/a-i3wT_VXOo" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
               </div> 
           </a>
       </li>
</ul>

【CSS】
.scroll_lst {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    
    margin: 25px 0 0;
    -webkit-overflow-scrolling: touch;
}
.scroll_item {
    display: inline-block;

}

.scroll_item_inr {
    display: block;
}

.scroll_item_thum {
    position: relative;
    margin-left:-20px;
}
.scroll_item_thum iframe {

    top: 0;
    right: 0;
    width: 80%;
    height: 80%;
}

.post-content ul, .post-content ol {
    margin-left: 0px;
}