I've spent the last few hours trying to figure out how to turn a YouTube video into an audio player, but I haven't had any success. So far, I've come across three main options: 1. Adjust the height of the iframe to 25px, but I find that visually unappealing. 2. Use play and pause buttons instead, but this method lacks a progress bar. 3. I've read somewhere that you can hide the video while keeping the controls visible using CSS, but I couldn't get it to work.
Does anyone know a better way to achieve this?
Edit: I have a potential solution, but I'm encountering some issues. Here's the code:
<html>
<head>
<style>
iframe{
height:0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="playeroptions.js"></script>
</head>
<body>
<audio id="player2" preload="none" controls>
<source src="https://www.youtube.com/watch?v={{id}}" type="video/x-youtube">
</audio>
</body>
</html>
In my playeroption.js file, I have the following script:
$(document).ready(function(){
$('audio').mediaelementplayer();
});
However, on my website, I'm unable to interact with any of the audio player's buttons. How can I resolve this issue? P.S. I'm getting the error message:
Refused to execute script from 'http://127.0.0.1:8000/player/9XvXF1LrWgA/playeroptions.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.