Anything Access

I was working on our clubs website and trying to find a clean and free method for adding a video slider. There are lots of free sliders which only seem to cover images.

I asked Chatgpt how this would be implemented in wordpress without using a plugin. The code generated worked but I needed to go through a number of revisions including adding a placeholder image as the initial view of the slider was empty. I also had to play with the scale until i found the default for the webm files I was loading.

This can be seen working on this site. To implement the code I added a new page and added custom html from the block editor and pasted the code below into the object.

Video Slider – Custom html Code

<script>
  function playVideo(url) {
    document.getElementById('videoFrame').src = url;
  }
</script>

<div class="video-slider">
  <div class="video-buttons">
    <button onclick="playVideo('/old_course/1.webm')"> 1</button>
    <button onclick="playVideo('/old_course/2.webm')"> 2</button>
    <button onclick="playVideo('/old_course/3.webm')"> 3</button>
	<button onclick="playVideo('/old_course/4.webm')"> 4</button>
	<button onclick="playVideo('/old_course/5.webm')"> 5</button>
	<button onclick="playVideo('/old_course/6.webm')"> 6</button>
	<button onclick="playVideo('/old_course/7.webm')"> 7</button>
	<button onclick="playVideo('/old_course/8.webm')"> 8</button>
	<button onclick="playVideo('/old_course/9.webm')"> 9</button>
  </div>
  <div class="video-buttons">
	<button onclick="playVideo('/old_course/10.webm')">10</button>
	<button onclick="playVideo('/old_course/11.webm')">11</button>
	<button onclick="playVideo('/old_course/12.webm')">12</button>
	<button onclick="playVideo('/old_course/13.webm')">13</button>
	<button onclick="playVideo('/old_course/14.webm')">14</button>
	<button onclick="playVideo('/old_course/15.webm')">15</button>
	<button onclick="playVideo('/old_course/16.webm')">16</button>
	<button onclick="playVideo('/old_course/17.webm')">17</button>
	<button onclick="playVideo('/old_course/18.webm')">18</button>
  </div>

  
  <div class="video-player">
    <div id="videoContainer">
      <img id="placeholder" src="/old_course/preview.PNG" alt="Tramore Golf Hole Preview" width="768" height="432">
      <iframe id="videoFrame" src="" width="768" height="432" frameborder="0" allowfullscreen style="display:none;"></iframe>
    </div>
  </div>
</div>

<style>
  .video-slider {
    text-align: center;
    margin-top: 20px;
  }

  .video-buttons button {
    padding: 12px 25px;
    font-size: 18px;
    margin: 10px;
    cursor: pointer;
    border: none;
    background-color: #000; /* Black background */
    color: #fff; /* White text */
    border-radius: 50px; /* Rounded button */
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .video-buttons button:hover {
    background-color: #333; /* Darker shade on hover */
    transform: scale(1.05); /* Slight zoom effect */
  }

  .video-player {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }

  #videoContainer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  #placeholder, #videoFrame {
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    max-width: 100%;
  }

</style>

<script>
  function playVideo(url) {
    document.getElementById('placeholder').style.display = 'none';
    document.getElementById('videoFrame').style.display = 'block';
    document.getElementById('videoFrame').src = url;
  }
</script>

I know on a mobile it looks very small but the user can click the video button to rotate the video. On the desktop it looks great and I dont have the overhead of a slider.

Any suggestions to make an improvement let me know in the comments

Click here for other WordPress Blog Posts