Hi, I added the custom Java script code using the plugin **Simple Custom CSS and JS on wordpress**
The code is suppose to use youtube api and OMDB\_API
I left the api keys out in this post for security but i have them in the actual wordpress
I’m doing this as a fun project, I want it to when a user types a movie title and clicks search
It will pull up the movie trailer so user can watch on the website and and can pull up info on the movie
and also for the recent trailer section, to add new trailers once uploaded to youtube to automatically
show up once added so users can watch new recent trailers.
When i try to search, it’s not loading and recent trailers not showing.
Please help
**Here’s the Javascript code**
document.getElementById(‘search-button’).addEventListener(‘click’, function() {
const movieName = document.getElementById(‘search-bar’).value;
if (movieName) {
fetchMovieDetails(movieName);
}
});
async function fetchMovieDetails(movieName) {
try {
const response = await fetch(\`https://www.omdbapi.com/?t=${movieName}&apikey=YOUR\_OMDB\_API\_KEY\`);
const data = await response.json();
if (data.Response === “True”) {
document.getElementById(‘movie-title’).innerText = data.Title;
document.getElementById(‘movie-plot’).innerText = data.Plot;
document.getElementById(‘movie-cast’).innerText = \`Cast: ${data.Actors}\`;
fetchMovieTrailer(data.Title);
} else {
alert(‘Movie not found!’);
}
} catch (error) {
console.error(‘Error fetching movie details:’, error);
}
}
async function fetchMovieTrailer(movieTitle) {
try {
const response = await fetch(\`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${movieTitle} trailer&type=video&key=YOUR\_YOUTUBE\_API\_KEY\`);
const data = await response.json();
const trailer = data.items\[0\];
if (trailer) {
document.getElementById(‘movie-trailer’).innerHTML = \`
<h3>Trailer</h3>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/${trailer.id.videoId}” frameborder=”0″ allowfullscreen></iframe>
\\\\\\\`;
}
} catch (error) {
console.error(‘Error fetching movie trailer:’, error);
}
}
async function fetchRecentTrailers() {
try {
const response = await fetch(\`https://www.googleapis.com/youtube/v3/search?part=snippet&order=date&q=movie trailer&type=video&key=YOUR\_YOUTUBE\_API\_KEY\`);
const data = await response.json();
const trailersContainer = document.getElementById(‘trailers-container’);
trailersContainer.innerHTML = ”;
data.items.forEach(trailer => {
const trailerElement = document.createElement(‘div’);
trailerElement.innerHTML = \`
<iframe width=”280″ height=”157″ src=”https://www.youtube.com/embed/${trailer.id.videoId}” frameborder=”0″ allowfullscreen></iframe>
\\\\\\\`;
trailersContainer.appendChild(trailerElement);
});
} catch (error) {
console.error(‘Error fetching recent trailers:’, error);
}
}
// Fetch recent trailers on page load
fetchRecentTrailers();
When I try to search by enter movie title nothing comes up and also the recent trailers isn’t loading also.
**This is html code below i’m using**
<div id=”content”>
<header>
<h1>Movie Trailer Search</h1>
<input type=”text” id=”search-bar” placeholder=”Search for a movie…”>
<button id=”search-button”>Search</button>
</header>
<main>
<section id=”movie-details”>
<h2 id=”movie-title”></h2>
<p id=”movie-plot”></p>
<div id=”movie-cast”></div>
<div id=”movie-trailer”></div>
</section>
<section id=”recent-trailers”>
<h2>Recent Trailers</h2>
<div id=”trailers-container”></div>
</section>
</main>
</div>
**and this is the css code**
header {
background-color: #333;
color: #fff;
padding: 1em;
width: 100%;
text-align: center;
}
header input {
width: 300px;
padding: 0.5em;
margin-right: 1em;
}
main {
padding: 2em;
width: 80%;
}
section {
margin-bottom: 2em;
}
# trailers-container iframe {
margin-right: 1em;
margin-bottom: 1em;
}
[ad_2]