this Theme<\/a>.<\/p>\nI embedded a video in that top edge-to-edge headerbox. The video is on autostart and now I want to add a custom mute button for it. So since I’m far from being a JS-genius, I got myself some code from the web and created a plugin, which looks like this:<\/p>\n
<?php\n\/*\nPlugin Name: LaLi Mute Button\nPlugin URI:\nDescription: Adds a mute button to the main page\nVersion: 1.1\nAuthor: Treppenmanni\nAuthor URI:\nLicense:\n*\/\n\nfunction lali_mute_button() {\n\n\twp_register_script( 'lali_mutebutton', get_template_directory_uri() . '\/js\/mutebutton.js">', '', null,'' );\n\n\tif ( is_front_page() ) {\n\t\twp_enqueue_script( 'lali_mutebutton' );\n\t}\n}\n\nadd_action( 'wp_enqueue_scripts', 'lali_mute_button' );\n?><\/code><\/pre>\nThe JS-file:<\/p>\n
\/\/ Connecting vars\nwindow.onload = function() {\n\n \/\/ Video\n var video = document.getElementById("video");\n\n \/\/ Buttons\n var mutebutton = document.getElementById("mute");\n\n}\n\n\/\/ Event listener for the mute button\n\nmutebutton.addEventListener("click", function() {\n if (video.muted == false) {\n \/\/ Mute the video\n video.muted = true;\n\n \/\/ Update the button text\n muteButton.innerHTML = "Unmute";\n } else {\n \/\/ Unmute the video\n video.muted = false;\n\n \/\/ Update the button text\n mutebutton.innerHTML = "Mute";\n }\n});<\/code><\/pre>\nHTML on the Main site:<\/p>\n
<div id="video-container">\n <!-- Video -->\n <video name "reel" id="video" width="100%">\n <source src="video\/Showreel.iphone.mp4" type="video\/mp4; codecs=avc1.42E01E,mp4a.40.2">\n <source src="video\/Showreel.webmsd.webm" type="video\/webm; codecs=vp8,vorbis">\n <source src="video\/Showreel.oggtheora.ogv" type="video\/ogg; codecs=theora,vorbis">\n <\/video>\n <!-- Video Controls -->\n <div id="video-controls">\n <button type="button" id="mute">Mute<\/button>\n <\/div>\n<\/div><\/code><\/pre>\nBefore that, I stumbled over this register-enqueue-thing and managed to get it running (took it’s time). The Plugin loads the script, the getElementByIds give back the correct values, but the button does nothing. Firebug gives me an error message: ReferenceError: mutebutton is not defined.<\/strong> Seems as if the value of the variable instantly gets forgotten after defining. Appreciate the help.<\/p>\nTreppenmanfred<\/p>\n","protected":false},"template":"","class_list":["post-3837041","topic","type-topic","status-closed","hentry","topic-tag-getelementbyid","topic-tag-javascript","topic-tag-variable","topic-tag-wp_enqueue"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/3837041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic"}],"about":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/types\/topic"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/topic\/3837041\/revisions"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/support\/wp-json\/wp\/v2\/media?parent=3837041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}