Widget API Play issue with Instagram In-App Browser
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 254
- Forks
- 53
- PR merge metrics
- No merged PRs in 30d
Description
Hello!
I'm testing the Widget API on various browsers to make sure it's working properly and for some reason it doesn't work on Instagram in-app browser. This is driving me crazy. Am I missing something? Is there a special "hack" I have to apply on play()?
The Widget API works fine on the following tested browsers:
Desktop (Windows)
Chrome
Firefox
Edge
Opera
Mobile (Android)
Chrome
Firefox
Edge
Opera
Samsung Internet
Facebook In-App Browser
Steps to reproduce:
1. Upload an html file to your server with the below code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
</head>
<body>
<iframe id="soundcloud_widget"
src="https://w.soundcloud.com/player/?url=https://api.soundcloud.com/users/1539950/favorites" width="100%"
height="400px" scrolling="no" frameborder="no" allow="autoplay"></iframe>
<br><br>
<button id="play" type="button">Play</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://w.soundcloud.com/player/api.js"></script>
<script>
$(document).ready(function () {
var widget = SC.Widget(document.getElementById('soundcloud_widget'));
widget.bind(SC.Widget.Events.READY, function () {
console.log('Ready...');
});
$('#play').click(function () {
widget.play();
});
});
</script>
</body>
</html>
2. Add the link of the above page on your Instagram profile link field.
3. Then go to your profile page and click on your link to open it with Instagram in-app browser and press the custom "Play" button under the embedded player.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Widget API documentation and the supplied HTML reproduction, focusing on the embedded player, widget.play(), and the Instagram in-app browser. Reproduce the behavior in Instagram and the listed working browsers, then identify whether the issue can be fixed in the Widget API or needs a documented browser limitation.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- api, web-dev
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100