1

Embedded YouTube video is supposed to autoplay on page load and initially load muted. User can then use a control to unmute as needed.

iOS overrides YouTube controls with native, and mute/unmute button permanently disappears. How to display mute/unmute button in 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>
Austen Holland
  • 1,828
  • 1
  • 15
  • 24
Daynis
  • 13
  • 5
  • Try to check the [documentation](https://developers.google.com/youtube/v3/guides/ios_youtube_helper) of iOS Helper Library if it can help you to embed YouTube videos in iOS Applications. For more information, you can also try to check these related question [ios: youtube video mute through custom button](https://stackoverflow.com/questions/17826741) and [YouTube API Not Muting in Safari (not iOS)](https://stackoverflow.com/questions/36485939) – KENdi Aug 11 '17 at 15:20

1 Answers1

0

After consulting iOS documentation the immediate answer was that it is impossible to override native iOS HTML5 video controls. iOS does not support "MUTE" control and there is no way to change that.

However, in this particular case I have resulted to the following workaround.

  1. There are 2 videos (w. media queries to handle the swap between 2)
  2. Video 1 (desktop) features autostart and initial-play-mute-ON)
  3. Video 2 (mobile) user initiated START and NOT muted 

 <!--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>
Daynis
  • 13
  • 5