angular 2 play muted youtube video on background

Question

How to play youtube video on background muted? Video should be played on component template in my angular 2 appplication. If I use iframe e.g

<div class="video-background">
<div class="video-foreground">
<iframe id="myVideo" src="https://www.youtube.com/embed/TjOXLJGH0P8?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=TjOXLJGH0P8" frameborder="0" allowfullscreen>
</div>
</div>

video is displayed but it's not muted. If I use yputube's player api nothing is displayed.

 <script src="http://www.youtube.com/player_api"></script>

 <div id="player"></div>

<script>
    var player;

    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
            playerVars: {
                'autoplay': 1,
                'controls': 0,
                'autohide': 1,
                'wmode': 'opaque',
                'showinfo': 0,
                'loop': 1,
                'mute': 1,
                //'start': 15,
                //'end': 110,
                'playlist': 'NQKC24th90U'
            },
            videoId: 'NQKC24th90U',
            events: {
                'onReady': onPlayerReady
            }
        });

    }

    function onPlayerReady(event) {
        event.target.mute();
        $('#text').fadeIn(400);
        //why this? Well, if you want to overlay text on top of your video, you
        //will have to fade it in once your video has loaded in order for this
        //to work in Safari, or your will get an origin error.
    }

    //this pauses the video when it's out of view, just wrap your video in .m-//video
    $(window).scroll(function() {
        var hT = $('.m-video').height(),
            wS = $(this).scrollTop();
        if (wS > hT) {
            player.pauseVideo();
        }
        else {
            player.playVideo();
        }
    });
</script>

score 1 · Answer 1 · answered Oct 26 '18 at 00:38

1

 <video [autoplay]="true" [muted]="true" [loop]="true" [controls]="false">
 <source src="../../../media/video/init.mp4" type="video/mp4">
 </video>

answered Oct 26 '18 at 00:38

Team Flamelsoft

43
1
7

Welcome to SO! Code-only answers are discouraged, as they provide no insight into how the problem was solved. Please edit your solution to include an explanation of how your code solved the problem at hand :) – Joel Oct 26 '18 at 00:58

score 0 · Answer 2 · edited May 23 '17 at 10:31

Follow Amit Agarwal's tutorial in How to Embed a YouTube Video with Sound Muted:

<script async src="https://www.youtube.com/iframe_api"></script>
<script>
 function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('muteYouTubeVideoPlayer', {
    videoId: 'YOUR_VIDEO_ID', // YouTube Video ID
    width: 560,               // Player width (in px)
    height: 316,              // Player height (in px)
    playerVars: {
      autoplay: 1,        // Auto-play the video on load
      controls: 1,        // Show pause/play buttons in player
      showinfo: 0,        // Hide the video title
      modestbranding: 1,  // Hide the Youtube Logo
      loop: 1,            // Run the video in a loop
      fs: 0,              // Hide the full screen button
      cc_load_policy: 0, // Hide closed captions
      iv_load_policy: 3,  // Hide the Video Annotations
      autohide: 0         // Hide video controls when playing
    },
    events: {
      onReady: function(e) {
        e.target.mute();
      }
    }
  });
 }

Let's say you have an object named myPlayer, after initializing an instance in the iFrame API like in this SO thread sample, you can use myPlayer.mute();.

You can also refer to this SO thread for more samples.

angular 2 play muted youtube video on background

2 Answers2