Video background mute feature malfunctioning

I've searched through numerous resources and reviewed various solutions for this issue, yet I still haven't been able to figure it out. Could someone please guide me on how to mute my youtube embedded video? P.s. I am a beginner when it comes to coding and new to this platform, so I apologize if I made any mistakes. 

<div class="video-bg embed-responsive embed-responsive-16by9">

<iframe class="embed-responsive-item" width="560" height="315" 
src="https://www.youtube.com/embed/ArGfDo1xQuM?rel=0&controls=0&showinfo=0&frameborder=0&autoplay=1&loop=1&playlist=eXadofBB7hM" frameborder="0" allowfullscreen></iframe>

</div>
javascripthtmlvideoyoutube-javascript-apimute

Answer №1

To ensure proper control over the movie playback, it is essential to utilize the iframe_api. Within the iframe src attribute, include enablejsapi=1, and assign an id attribute to the iframe element that links it with the YT.Player instance. Following this setup, employ the provided JavaScript code for managing the movie's playback.

<script src='http://www.youtube.com/iframe_api'></script>
<script>
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('playerId', {
            events: {
                onReady:onPlayerReady
                }
            }
        )
    }
    function onPlayerReady(event) {
        player.mute();
        player.setVolume(0);
        player.playVideo();
    }
</script>

<div class="video-bg embed-responsive embed-responsive-16by9">

<iframe id='playerId' class="embed-responsive-item" width="560" height="315" 
src="https://www.youtube.com/embed/ArGfDo1xQuM?rel=0&controls=0&showinfo=0&frameborder=0&autoplay=1&loop=1&playlist=eXadofBB7hM&enablejsapi=1" frameborder="0" allowfullscreen></iframe>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming a dynamic HTML layout into a non-responsive one: "RESPONSIVE NO MORE"

I'm currently working with an HTML document that has a responsive design. However, I now need to make it non-responsive. Can someone advise me on the most efficient and fastest way to do this? I attempted using min-width for both html and body, but ...

htmlcssresponsive-designmedia-queries

Toggle button with v-bind in Nativescript Vue

Hey there, I'm just starting out with nativescript vue and I have a question regarding a simple "toggle" feature that I'm trying to implement. Essentially, when a button is pressed, I want the background color to change. <template> < ...

javascriptvue.jstogglenativescriptnativescript-vue

Adding nested JSON data to MySQL using NodeJS

My current challenge involves using Node.js to INSERT JSON data into a MySQL database. Everything runs smoothly until I encounter nested values within the JSON structure. Here is an example snippet of my JSON data: var result2 = [{ "id": 89304, "employe ...

javascriptmysqljsonnode.js

Html elements overlapping due to incorrect positioning

I'm having an issue with my div elements on a web page. Despite them being set up separately, they all end up positioned underneath the first div created (SiteFullControl). Is there any solution to prevent this from happening? <div id="SiteFullCo ...

csshtml

Using PHPMailer in conjunction with a textarea form and HTML

Currently, I am attempting to piece together code from a PHP tutorial that demonstrates how to create a basic PHPMailer form for sending plain text emails to a mailing list. The simplicity of the form is ideal as it will be used by only a few individuals. ...

phphtmlformsemailphpmailer

What are the reasons for the dynamic exclusion of an element in Angular?

Can someone help me figure out why my data is not being added dynamically using ng-repeat? I have entered the "name" which should be added to the data, but it is not displaying in the UI. You can see the issue in this demo app.controller("studentcntr", ...

javascriptjquerynode.jsangularjsangularjs-directive

What does {``} denote in react-native programming?

During my participation in a collaborative project, I noticed that there is a significant amount of {' '} being used. For instance: <Text> {' '} {constant.Messages.PointText.hey} {this._user.first_name || this._user ...

javascriptreactjsreact-native

Failed to fully install all dependencies for my project with yarn install

After cloning a project from gitlab, I attempted to install the dependencies using the yarn install command. However, there are several dependencies that yarn is unable to install and it keeps showing the error message: info There appears to be trouble wit ...

javascriptreactjsnpmnext.jsyarnpkg

Square-shaped arch chart utilizing Highcharts library

For my project, I have a unique challenge of creating an Arched square chart using High Charts. Despite my efforts, I have not been able to find any suitable platform that demonstrates this specific requirement. The task at hand is outlined as follows – ...

javascripthighcharts

Assistance with offsetting a jQuery drop down menu

This is the third jQuery script that I've been working on. While parts of it have been inspired by other scripts, I'm now focusing on implementing a specific feature. I've dedicated 4 hours to solving the issue of displaying the submenu on ...

javascriptjquerydrop-down-menu

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

htmlcsshtml-table

Utilizing d3.js to implement a scatterplot with zoom functionality that focuses solely on zooming the axis without affecting

Having trouble creating a scatterplot with zoom functionality where only the axis is getting zoomed, not the data itself. Can anyone provide some assistance or insight on what might be wrong? If you're interested in checking out the project, here&apo ...

javascripthtmlcsscsvd3.js

Height of CSS border-top

I'm facing an issue with setting the height of my top border. It seems like a traditional solution is not possible based on what I have read so far. However, I am determined to find a workaround for this problem. My goal is to have the border align at ...

htmlcss

What could be causing the error "Err: user.validPassword is not a function" to occur

I am in the process of developing a node.js app and I have implemented Passport js. After referring to the Passport-local documentation on their official website, I decided to utilize the local passport-strategy. However, I encountered an error stating tha ...

javascriptnode.jsexpresspassport.jspassport-local

Encountering the error message "Uncaught Error: [vuex] Getters must be functions, but 'getters.getters' is {}. This occurred while splitting the Vuex store into modules in Vue.js."

As a beginner in VUEX, I am experimenting with building a test application to dive deeper into the world of VUEX. I have organized my VUEX store into modules, where each module has its own getter.js file. Getters, actions, and mutations are imported into i ...

javascriptvue.jsvuexgetter

Unable to display images in the ngImgCrop upload preview modal screen

Currently, I am utilizing ngImgCrop to enable an upload preview and square crop feature for profile pictures. Unfortunately, I am experiencing issues where neither the image preview nor the cropping functionality are being displayed. 'use strict ...

javascripthtmlangularjsangularjs-directiveangularjs-scope

Configuring the Port for NodeJS Express App on Heroku

Currently, I am in the process of hosting my website on Heroku and configuring everything to ensure my app is up and running smoothly. However, each time I attempt to submit the form, undefined errors occur. For more details on the Undefined Errors and Co ...

javascriptnode.jsexpressherokuhosting

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox

Is it true that Javascript's onclick global event handlers fire prior to the page being fully loaded

I'm trying to set a global event handler for an image, but running into issues. When I use the code document.getElementById("post_image").onclick = photoEnlarge;, it returns an error saying Uncaught TypeError: Cannot set property 'onclick' ...

javascript

Upon inserting Node 5, an error with the code EINVALIDTYPE occurred in npm

Recently, after I upgraded to Node 5, I've been encountering an error in the terminal every time I try running anything with npm. npm -v: 2.14.12 Desperately attempting to update npm to the latest version: MacBook-Pro-de-MarceloRS:promo-auto-loan ...

javascriptnode.jsnpm