I'm having problems for jquery to send a url from an image to an html tag. I explain; I have an ACF repeater with 5 variables, including an image intended to be a poster of a video and what I'm trying to do is that by jquery, in smaller screens of 900px, the attribute "poster" is added to the video tag.

This is my code:

<div class="video">
      <video class="thevideo" loop muted>
             <source src="<?php echo $previews['volles-video']; ?>" type="video/mp4">
             <source src="<?php echo $previews['kurzes-video']; ?>" type="video/webm">
             Your browser does not support the video tag.
     </video>
</div>
 <script>
     $(document).ready(function () {
                   if (document.documentElement.clientWidth < 900) {
                     $('.video video').attr('poster' ,"<?php echo $previews['poster']; ?>");

                }


          });


     </script>

the code inspector prints this

   <div class="video">
        <video class="thevideo" loop="" muted="" poster="">
               <source src=".mp4" type="video/mp4">
               <source src=".webm" type="video/webm">
                Your browser does not support the video tag.
        </video>
 </div>
  <script>
       $(document).ready(function () {
             if (document.documentElement.clientWidth < 900) {
                 $('.video video').attr('poster' ,"http://privateurl/test/dlb/wp-content/uploads/2019/01/Verklebt-oder-nicht-verklebt-das-ist-in-diesem-Teilspiel-von-Handycrash-die-Frage.jpg");
             }

      });


  </script>

That is, jquery recognizes the url, but does not pass it to the poster and I do not know why, in fact jquery adds the poster to the video tag. To say that everything is in its corresponding foreach, that the php functions work, checked by var_dump, in fact the web is ready in the absence of this. Everything is functional except this script is driving me crazy. I've tried to do it by javascript like this:

<script>
  var url = "<?php echo $previews['poster']; ?>";
  $('.video video').attr('poster' ,url);
<script>

And I even tried to put it as background and the same thing happens. But if for example I take the direct url of the inspector and paste it into my code it works

any ideas?

Thank

I'm having problems for jquery to send a url from an image to an html tag. I explain; I have an ACF repeater with 5 variables, including an image intended to be a poster of a video and what I'm trying to do is that by jquery, in smaller screens of 900px, the attribute "poster" is added to the video tag.

This is my code:

<div class="video">
      <video class="thevideo" loop muted>
             <source src="<?php echo $previews['volles-video']; ?>" type="video/mp4">
             <source src="<?php echo $previews['kurzes-video']; ?>" type="video/webm">
             Your browser does not support the video tag.
     </video>
</div>
 <script>
     $(document).ready(function () {
                   if (document.documentElement.clientWidth < 900) {
                     $('.video video').attr('poster' ,"<?php echo $previews['poster']; ?>");

                }


          });


     </script>

the code inspector prints this

   <div class="video">
        <video class="thevideo" loop="" muted="" poster="">
               <source src="http://www.die-lounge/test/dlb/wp-content/uploads/2019/01/VerifiableTerrificHind.mp4" type="video/mp4">
               <source src="http://www.die-lounge/test/dlb/wp-content/uploads/2019/01/VerifiableTerrificHind.webm" type="video/webm">
                Your browser does not support the video tag.
        </video>
 </div>
  <script>
       $(document).ready(function () {
             if (document.documentElement.clientWidth < 900) {
                 $('.video video').attr('poster' ,"http://privateurl/test/dlb/wp-content/uploads/2019/01/Verklebt-oder-nicht-verklebt-das-ist-in-diesem-Teilspiel-von-Handycrash-die-Frage.jpg");
             }

      });


  </script>

That is, jquery recognizes the url, but does not pass it to the poster and I do not know why, in fact jquery adds the poster to the video tag. To say that everything is in its corresponding foreach, that the php functions work, checked by var_dump, in fact the web is ready in the absence of this. Everything is functional except this script is driving me crazy. I've tried to do it by javascript like this:

<script>
  var url = "<?php echo $previews['poster']; ?>";
  $('.video video').attr('poster' ,url);
<script>

And I even tried to put it as background and the same thing happens. But if for example I take the direct url of the inspector and paste it into my code it works

any ideas?

Thank

• php
• jquery
• html

Share Improve this question asked Apr 4, 2019 at 10:09 Dario B.Dario B. 1551010 bronze badges 7

• Maybe the $ is undefined? Try jQuery(document).ready(function ($) – Sally CJ Commented Apr 4, 2019 at 10:15
• @SallyCJ gives the same problem...:( – Dario B. Commented Apr 4, 2019 at 10:26
• And does the console show any errors - jQuery may have not yet been loaded by the time your code is executed? – Sally CJ Commented Apr 4, 2019 at 10:35
• @SallyCJ Nono, this is correct, because in screens smaller than 900px it adds the poster attribute. and if I put a url if he interprets it well and adds it. and console and in the console everything is correct – Dario B. Commented Apr 4, 2019 at 10:36
• "in fact jquery adds the poster to the video tag" - if you're sure about that, and that $previews['poster'] is a valid image URL, then that's weird. But if jQuery adds an empty poster tag, then check again with var_dump( $previews ); and make sure the poster item exists with the proper URL/value. – Sally CJ Commented Apr 4, 2019 at 11:20

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

After thinking a lot, I have solved it myself in the following way:

if (document.documentElement.clientWidth < 900) {

    $('video').each(function () {
        const poster = $(this).data('poster');
        $(this).attr('poster', poster);
    });
}

Thanks to everyone