using file field urls in js/jquery

• CAPrieto

• November 2, 2019 at 3:00 am

I am trying to replicate code I have used in the past outside of wordpress that adds a different source tag into a video tag depending on the browser width. I am attempting to use in a repeater field and currently I get an empty video tag with no source tag but all the variables correctly render the anticipated id and video urls

<?php if( get_row_layout() == 'video' ):?>
  <?php if( get_sub_field('video_file') ): ?>
    <video id="<?php the_sub_field('video_id'); ?>"></video>
    <script>
      $(document).ready(function(){
        var videoFile = $('#<?php the_sub_field('video_id'); ?>');
        var videoM = $('<?php the_sub_field('video_file_m'); ?>');
        var videoD = $('<?php the_sub_field('video_file'); ?>');
        var WindowWidth = $(window).width();
        if (WindowWidth < 640) {
          //It is a small screen
          videoFile.append("<source src='"+videoM+"' type='video/mp4' >");
        } else {
          //It is a big screen or desktop
          videoFile.append("<source src='"+videoD+"' type='video/mp4' >");
        }
      });
    </script>
  <?php endif; ?>
<?php endif; ?>

• John Huebner

• November 9, 2019 at 2:21 am

I don’t understand why you’re using $() around the url values returned by ACF

<?php if( get_row_layout() == 'video' ):?>
  <?php if( get_sub_field('video_file') ): ?>
    <video id="<?php the_sub_field('video_id'); ?>"></video>
    <script>
      $(document).ready(function(){
        var videoFile = $('#<?php the_sub_field('video_id'); ?>');
        var videoM = '<?php the_sub_field('video_file_m'); ?>';
        var videoD = '<?php the_sub_field('video_file'); ?>';
        var WindowWidth = $(window).width();
        if (WindowWidth < 640) {
          //It is a small screen
          videoFile.append("<source src='"+videoM+"' type='video/mp4' >");
        } else {
          //It is a big screen or desktop
          videoFile.append("<source src='"+videoD+"' type='video/mp4' >");
        }
      });
    </script>
  <?php endif; ?>
<?php endif; ?>

• CAPrieto

• November 9, 2019 at 3:17 am

Because using it with or without the $() didn’t work so I just pasted what I started with. I tried your code above and I still get an empty video tag with no source tag appended.

• John Huebner

• November 9, 2019 at 3:34 am

I don’t see anything in the code given that should be causing a problem. This leads me to believe that it has to do with the values returned by the fields.

What type of fields are these and what are their return values?

video_file
video_id
video_file_m

• CAPrieto

• November 9, 2019 at 4:27 am

video_file = file field, file url
video_id = text field
video_file_m = file field, file url

• John Huebner

• November 9, 2019 at 4:51 am

Are these fields sub fields of anything other than the layout? Like a group field or a repeater field?

Is the video id unique on the page?

What does this actually return

var videoFile = $('#<?php the_sub_field('video_id'); ?>');
console.log(videoFile);

• CAPrieto

• November 9, 2019 at 6:11 am

They are sub fields of a flexible content layout (mistakenly referred to as repeater field in my initial post). Video id is unique.

However in trying out what you asked I got console error: Uncaught TypeError: $ is not a function

Which I remedied by using jQuery(function ($) { instead of $(document).ready(function(){ or jQuery(function(){

I tested by adding multiple videos to the page and it seems to be working. Thank you for your help! I had given up on this idea and it was essentially user error :/