Unable to change video attr. How to fix it?

Question

I was working on a menu to change my videojs source and it works partly. I can change my video source with $video_obj.src but i unable to change my tags like nonHD or even classes style .vjs-poster.

something I forgot?

$("ul.dl-menu a").click(function() {
	
	var $myClass 		=  $(this).attr("class");
	var $target         =  $(this).attr("id");
    var $content_path   = "~path~/media-video/";
	var $thumbs         = "~path~/media-video/thumbs/";

    if ($myClass === "library") {
	    var $vid_obj        = videojs("div_video");
	    var $video_div			= "div_video";
    }
    else {
	    var $vid_obj        = videojs("div_video_awards");
	    var $video_div			= "div_video_awards";
    }

	
      $vid_obj.ready(function() {
      $($video_div+'.poster').hide();
      $($video_div+'_html5_api').hide();
      $vid_obj.pause();
      $($video_div+'video source:nth-child(1)').attr("src",$content_path+'mp4/'+$target+'.mp4');
	  $vid_obj.src({ type: "video/mp4", src: $content_path+'mp4/'+$target+'.mp4' });
      $($video_div+'video').attr("src",$content_path+'mp4/'+$target+'.mp4');
	  $($video_div).attr("nonHD",$content_path+'mp4/'+$target+'.mp4');
      $($video_div).attr("HD",$content_path+'mp4-720p/'+$target+'.mp4');
      $($video_div+'video').attr("HD",$content_path+'mp4-720p/'+$target+'.mp4');
      $($video_div+'video').attr("nonHD",$content_path+'mp4/'+$target+'.mp4');
      $($video_div+'.vjs-poster').attr("style", 'background-image: url('+$thumbs+$target+'.jpg);');
      $($video_div+'.vjs-tech').attr("poster",$thumbs+$target+".jpg").show();
      $($video_div).attr('poster',$thumbs+$target+'.jpg');
      $($video_div).removeClass('vjs-playing').addClass('vjs-paused');
      var css = document.createElement("style");
	  css.type = "text/css";
      css.innerHTML = ".vjs-control.vjs-HD-button { color: silver; font-weight:normal; text-shadow: 0 0 5em #fff;}";
      document.body.appendChild(css);
      HD1 = false;
      $vid_obj.load();

      $($video_div+'_html5_api').show();
      setTimeout(function(){
      $vid_obj.play();
      }, 0);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<video id="div_video" class="video-js vjs-sublime-skin vjs-big-play-centered" width="auto" height="auto" poster="http://video-js.zencoder.com/oceans-clip.png" HD="http://video-js.zencoder.com/oceans-clip.mp4" nonHD="http://video-js.zencoder.com/oceans-clip.mp4" controls>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
</video>

<div id="dl-menu" class="dl-menuwrapper">
  <button class="dl-trigger">Menu</button>
  <ul class="dl-menu">
    <li><a class="library" href="javascript:;" id="MBHD0790-03">Into the Woods</a></li>
    <li><a class="library" href="javascript:;" id="MBHD0790-04">Kingsman</a></li>
  </ul>
</div>

Answer 1

Well, given this:

 $($video_div+'video').attr("nonHD",$content_path+'mp4/'+$target+'.mp4');

you'd be doing

 $('video_divvideo').attr(....);

There's no #, so javascript will be looking for a tag like <video_divvideo> in the dom, which of course doesn't exist.

Maybe you want

 $('#' +$video_div).attr(...);

instead?