We Keep Coding

Hide play button when video is not autoplaying

On my website there is a video which should autoplay. It does that on most devices, apart from, of course, iPhones. I'm using the WordPress cover widget (and WordPress beta 5.5) for the video.
When it doesn't autoplay on the iPhone, it shows an unclickable play button:
Image
How can I make this play button disappear, so that at least a static image shows?
Thanks!

If you know how to code in js(javascript) or knows somebody who does, you could remove the play button icon or even autoplay the video for iPhone.
helpful resources
https://developer.mozilla.org/en-US/docs/Learn
https://www.w3schools.com/js/default.asp
There is this handy npm package that can help its called react-player https://www.npmjs.com/package/react-player
it works with vanillajs to check out a fiddle of the example on the homepage
https://jsfiddle.net/o62snj3p/

Can you show your code? Videos should autoplay on all browsers. For mobile, you need to add the muted attribute.

Mute sound in P5JS while still using its waveform?

I am using the p5.sound library to create an audio visualiser. This works perfectly, however I would like to be able to keep this functionality without the song actually playing.
The waveform and spectrum are both based off of the volume, so setting that to zero means that the whole thing just displays no sound. Is there a way to mute the tab using javascript, or stop the noise from actually playing, just keep it being read by the .waveform and .analyse functions?
Code: https://www.openprocessing.org/sketch/523860#code

I faced the same need, and actually solved with no code, simply muting the tab in the browser.
--> To mute a browser tab in Firefox, right-click the tab and select “Mute Tab”

Youtube/vimeo iframe won't play in firefox

I am embedding a youtube/vimeo video onto my site with an iframe.
<iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...></iframe>
The {$entity->getYouTubeVideoID()} bit is smarty template code syntax. I don't think that is the problem because the video uploads and plays fine in Chrome and IE9 and up. The video also uploads to firefox and safari fine, meaning I can see the video and it's the right one. But when I click the video it does not play in either firefox or safari.
What is interesting is that the other events are triggered. That is, on mouseover the play buttons on the videos change. On the youtube videos, the button in the middle with the play icon starts out as grey and on mouseover turns to red. So the iframe is registering events. But, it won't play on click. I have no idea where to go from here.
The only other event handlers I have on the iframe is this one but I doubt that is messing it up:
$(window).blur(function(){
if($('iframe').is(':focus')){
mySwipe.slide(mySwipe.getPos(), 1000);
}
});
(mySwipe refers to the swipe.js slideshow library)

I had an issue with playback buttons in firefox also. I was using a html5 Doctype, so I added the following after the youtube url
&html5=1
maybe this might help you.

I simply could not get embedded videos to play inside the swipe.js library (or any other touch enabled jquery library). My solution was to extract thumbnail images from vimeo/youtube APIs and use them as placeholders in the slideshow. Then register a click event on the thumbnail that opened the video in a lightbox.

I know this thread is six years old, but I recently had this problem and all of the solutions on the internet did not work. But I figured it out for my site:
If you have a secure site (HTTPS) and you embed a youtube video with the code posted here,
iframe src="http://www.youtube.com/embed/{$entity->getYoutubeVideoID()}" ...
... Firefox will block it, because that is "Mixed content." HTTP is unsecure, so it is not allowed to show.
Youtube is an HTTPS site, so including that "s" in your URL will allow it to play in Firefox and IE without having to disable security.

Flexslider 2 basically solved it. Swipe.js is wonderful, but with playing youtube/vimeo in a slider Flexslider works better.

Deactivate/removing an iframe using javascript

I have more than 15 thumbnail images displayed(fetched from DB and looped) on the webpage. Onclick of an image, I have an overlay which plays the youtube video(iframe version).
The problem is that, on closing the overlay, the youtube video continues to play.
After going through the YT documentation, I figured out that there is no way to control the YTplayer inside an iframe. But, I have to use an iframe because embed and object tags make use of flash and flash is not supported in Mac(Mountain Lion)
So, I was thinking, if there is a way to deactivate iframe then the player may stop. display:none; does not help.
Please suggest.
Thanks in advance.

I tried this method and it works:
I fetch the iframe source by id using javascript and make the source blank.
<script>
function stopVideo(){
document.getElementById("iframeID").src= "";
}
</script>

Soundcloud Custom Player Pause Player

How do you pause the Soundcloud Custom Player (http://developers.soundcloud.com/docs/custom-player)? I have a large single page with audio players. When a user navigates to a different section of the page the hash in the URL changes. How do I pause the Soundcloud Custom Player when the hash changes?
I've tried $(".sc-player").pause() but it doesn't always work. I'm looking for it to work on desktop and mobile. It seems desktop uses a hidden SWF file while mobile uses the audio element.
Any help is appreciated!

$('.sc-player.playing a.sc-pause').click();

I kind of discovered this by accident (tested on the jsFiddle page, and it paused the player).
To the code on this page I made a little addition:
http://jsfiddle.net/aj3Pw/1/
In the HTML, I added a 'Pause' button:
<button id="pause">Pause</button>
and then at the bottom of the JS, I added an event listener with "sc.pause()", and it worked:
document.getElementById('pause').addEventListener('click', function() { sc.pause();
Hope this helps!