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?