title: Unable to change video attr. How to fix it?
body: <p>I was working on a menu to change my videojs source and it works partly. I can change my video source with <code>$video_obj.src</code> but i unable to change my tags like <code>nonHD</code> or even classes style <code>.vjs-poster</code>.</p>
  
  <p>something I forgot?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("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);
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;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&gt;
  &lt;source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  
  &lt;div id="dl-menu" class="dl-menuwrapper"&gt;
    &lt;button class="dl-trigger"&gt;Menu&lt;/button&gt;
    &lt;ul class="dl-menu"&gt;
      &lt;li&gt;&lt;a class="library" href="javascript:;" id="MBHD0790-03"&gt;Into the Woods&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="library" href="javascript:;" id="MBHD0790-04"&gt;Kingsman&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>