Support

Account

Home Forums Front-end Issues using file field urls in js/jquery

Solved

using file field urls in js/jquery

  • 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; ?>
  • 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; ?>
    
  • 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.

  • 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
    
  • video_file = file field, file url
    video_id = text field
    video_file_m = file field, file url

  • 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);
    
  • 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 :/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.