JQuery - Get all child video poster value and update value with respective parent video html tag

Question

Trying to update the attribute value for each video html tag (classname=".video_block video") by using their respective child div tag (classname="posterURL").

JQuery -

$(document(){
    $('.video_block .posterURL').each(function() {
        var poster = $(this).data("poster")
        $(.video_block video).attr('poster', poster);
    })
})

HTML -


<div class="container">
    <div class="media_block">

        <div class="video_block">
            <video
            controls
            src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
            width="620">
            </video>

            <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div></div>
        </div>

        <div class="video_block">
            <video
            controls
            src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
            width="620">
            </video>

            <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div></div>
        </div>

        <div class="video_block">
            <video
            controls
            src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
            width="620">
            </video>

            <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div></div>
        </div>
    </div>
</div>

Please share your thoughts!

Thanks in advance!

Please pay attention to your browser console. In this case, it will surely tell you that neither of the two operands of the _math operation_ you are attempting there with `val.data-poster`, actually exist. — CBroe, Jul 13 '23 at 06:33
@CBroe thanks for sharing your thoughts! I've updated the changes in this question. — Anand Rajagopal, Jul 13 '23 at 06:38

Phil · Answer 1 · 2023-07-13T06:41:15.597

You have a couple of syntax errors and will need to traverse from the .posterURL element to its sibling to target the appropriate video element.

The whole thing can be simplified like this

$(".video_block video").attr("poster", function() {
  return $(this).next(".posterURL").data("poster");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div class="video_block">
  <video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>

  <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>

<div class="video_block">
  <video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>

  <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>

<div class="video_block">
  <video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" width="620"></video>

  <div class="posterURL" data-poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"></div>
</div>

That is, for each <video> element, set its poster attribute value to the data-poster value of the next .posterURL sibling element.

thanks for sharing your thoughts! I will apply the same. – Anand Rajagopal Jul 13 '23 at 07:09 — Anand Rajagopal, Jul 13 '23 at 07:09
it's working, thanks a lot for your time. – Anand Rajagopal Jul 13 '23 at 08:26 — Anand Rajagopal, Jul 13 '23 at 08:26

JQuery - Get all child video poster value and update value with respective parent video html tag

1 Answers1