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不支持＆＃34; MUTE＆＃34;控制，没有办法改变这一点。

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

有2个视频（w。用于处理2之间交换的媒体查询）
视频1（桌面）功能自动启动和初始播放静音开启
视频2（移动）用户启动了START而非静音

＆＃13;

 <!--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>

＆＃13;

    <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>

＆＃13;

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

1 个答案: