Safari：嵌入的 Youtube 视频控件被本机覆盖。无法取消静音/静音视频

Question

嵌入的 YouTube 视频应该在页面加载时自动播放，并且最初加载时静音。然后，用户可以根据需要使用控件取消静音。

iOS 用原生覆盖 YouTube 控件，静音/取消静音按钮永久消失。如何在IOS中显示静音/取消静音按钮？

<style type="text/css">
    .embed-container {
        position: relative; 
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
        max-width: 100%; 
    }
    .embed-container iframe, 
    .embed-container object,
    .embed-container embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div class="embed-container">
    <iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/cvRzPbeVp9I?rel=0&amp;controls=1&amp;showinfo=0&amp;mute=1&amp;autoplay=1&amp;t=17s"></iframe>
</div>

Answer 1

在查阅 iOS 文档后，立即得到的答案是无法覆盖原生 iOS HTML5 视频控件。 iOS 不支持“静音”控制，也没有办法改变它。

但是，在这种特殊情况下，我得到了以下解决方法。

1. 有 2 个视频（使用媒体查询来处理 2 个视频之间的交换）
2. 视频 1（桌面）具有自动启动和初始播放静音功能）
3. 视频 2（移动）用户启动了 START 并且未静音

 <!--Responsify CSS Block -->
    <style type="text/css">
    .embed-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    }
    .embed-container iframe, .embed-container object,
    .embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }
    }
    
    <!--Media queries to control YouTube video embed containers by screen size -->
    
    .dektop-dayday2-visible {
    display: none;
    }
    .mobile-dayday2-visible {
    display: none;
    }
    
    @media (max-width: 1024px) {
      .dektop-dayday2-visible {
        display: none;
      }
      .mobile-dayday2-visible {
        display: block;
    }
    @media (min-width: 1025px) {
      .dektop-dayday2-visible {
        display: block;
      }
      .mobile-dayday2-visible {
        display: none;
    }
    </style>

    <div class="embed-container dektop-dayday2-visible"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/cvRzPbeVp9I?rel=0&amp;controls=1&amp;showinfo=0&amp;mute=1&amp;autoplay=1"></iframe></div>
    
    <div class="embed-container mobile-dayday2-visible"><iframe allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/cvRzPbeVp9I?rel=0&amp;controls=1&amp;showinfo=0&amp;autoplay=0"></iframe></div>