javascript php wordpress wordpress-featured-image

Replace Poster Image with Wordpress Featured Image, using JavaScript

I use Plyr video player inside my posts and I want poster image to be automatically the featured image.

I use the following JavaScript but it doesn't work!

document.addEventListener('DOMContentLoaded', () => { 
const controls = [
    'play-large',
    'restart',
    'play',
    'progress',
    'current-time',
    'duration',
    'mute',
    'volume',
    'captions',
    'settings',
    'pip',
    'fullscreen'
];

const player = new Plyr('#player', { controls });
  
  // Expose
  window.player = player;

  // Bind event listener
  function on(selector, type, callback) {
    document.querySelector(selector).addEventListener(type, callback, false);
  }
});
(function() {
  document.getElementsByClassName("post_plyr")[0].setAttribute("poster", "<?php echo get_the_post_thumbnail_url( null, 'full' );?>"); 
        })();

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<link rel="stylesheet" href="https://mhdizmni.ir/plyr-style.css"/>

<div class="mhdizmni_plyr">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player" class="post_plyr">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="480">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
                <track kind="captions" label="Persian" srclang="fa" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
                    default>
                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt">
            </video>
</div>

Though it doesn't work in that way, if I change <?php echo get_the_post_thumbnail_url( null, 'full' );?> to an image link, for example, https://mhdizmni.ir/plyr/mhdizmniPlyrPoster.jpg, it works (see it work below), but I need the dynamic version.

document.addEventListener('DOMContentLoaded', () => { 
const controls = [
    'play-large',
    'restart',
    'play',
    'progress',
    'current-time',
    'duration',
    'mute',
    'volume',
    'captions',
    'settings',
    'pip',
    'fullscreen'
];

const player = new Plyr('#player', { controls });
  
  // Expose
  window.player = player;

  // Bind event listener
  function on(selector, type, callback) {
    document.querySelector(selector).addEventListener(type, callback, false);
  }
});
(function() {
  document.getElementsByClassName("post_plyr")[0].setAttribute("poster", "https://mhdizmni.ir/plyr/mhdizmniPlyrPoster.jpg"); 
        })();

<script src="https://cdn.plyr.io/3.6.2/plyr.js"></script>
<link rel="stylesheet" href="https://mhdizmni.ir/plyr-style.css"/>

<div class="mhdizmni_plyr">
<video controls crossorigin playsinline poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" id="player" class="post_plyr">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="480">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
                <track kind="captions" label="Persian" srclang="fa" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"
                    default>
                <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt">
            </video>
</div>

any idea how to fix it?!!!!

Thanks in advance!

Solution

When you are using get_the_post_thumbnail_url outside of the loop, you must pass the post id into it (it on'y picks up the current post id inside the loop):

document.getElementsByClassName("post_plyr")[0]
        .setAttribute("poster", "<?php echo get_the_post_thumbnail_url( $post_id, 'full' );?>");

There are a few different ways of getting the current post id, I've included some below so you can decide on which works best for you (e.g. you might already be using global $post for example, you might prefer to use that):

// Use the get_queried_object_id function
$post_id = get_queried_object_id();

// OR Access the global post
global $post; $post_id = echo $post->ID;

// OR access the current query
global $wp_query; $post_id = $wp_query ->post->ID;