-1

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.com/test/dlb/wp-content/uploads/2019/01/VerifiableTerrificHind.mp4" type="video/mp4">
               <source src="http://www.die-lounge.com/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

  • Maybe the $ is undefined? Try jQuery(document).ready(function ($) – Sally CJ Apr 4 at 10:15
  • @SallyCJ gives the same problem...:( – Dario B. Apr 4 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 Apr 4 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. Apr 4 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 Apr 4 at 11:20
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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.