Figure out how to insert a YouTube video that autoplay yet the sound is muted. The YouTube video will consequently play when the page is loaded yet with the volume set to 0.
It is anything but difficult to implant YouTube videos in your site. You get the default IFRAME embed code, glue it anyplace inside your website page and you’re finished. YouTube offers essential customization – you can adjust the player measurements or shroud the YouTube Branding– however in the event that you might want to practice more control over the behaviour of the installed player, YouTube Player API is the approach.
This instructional guide clarifies how you can install a YouTube video that will naturally play when the website page is loaded yet with muted sound.
Case in point, an items site may utilise short screencasts to highlight and these recordings will autoplay when the page is loaded. The volume is however set to 0 and the client can physically snap to un-mute the video. Correspondingly, on the off chance that you are utilizing YouTube video backgrounds, it bodes well to insert muted recordings that keep running in a loop.
Insert YouTube Player with Autoplay and Sound Muted
Go the YouTube video page and note down the ID of the video from the URL. Case in point, if the YouTube video connection is http://youtube.com/watch?v=xyz-123, the video id is xyz-123. When you have the ID, you should simply supplant YOUR_VIDEO_ID in the accompanying code with that string.
Next spot the altered code in your site page and the inserted video would naturally play however the sound is muted.
<div id=”muteYouTubeVideoPlayer”></div>
<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_policty: 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();
}
}
});
}
</script>
You can encourage alter the player by changing the different player variables as remarked in the code. Case in point, on the off chance that you set circle as 1, the video will play in a circle. Set fs to 1 to demonstrate the fullscreen catch inside the video player. Inside, the player is implanted utilizing the YouTube IFRAME API. At the point when the page is stacked, the onReady occasion runs that quiets the video.
