Skip to content
Advertisement

javascript add text to youtube description box

am trying to add text to youtube description box. here is the javascirpt code am using but not inputting the text as i am sure am not doing it right.

x=document.getElementsByClassName("description-textarea");
for(var i = 0; i < x.length; i++){
    x[i].innerText="text 1 changed!";    // Change the content
    }

here is some code i got from html element

<div id="outer" class="style-scope ytcp-form-input-container"><div id="label" class="style-scope ytcp-form-input-container">
      Description
      <div id="label-help-tooltip" class="style-scope ytcp-form-input-container"><tp-yt-iron-icon id="help-icon" class="help-outline-icon style-scope ytcp-form-input-container" compact="" tabindex="0" aria-labelledby="goog_929542190" role="tooltip"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false" class="style-scope tp-yt-iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope tp-yt-iron-icon"><path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" class="style-scope tp-yt-iron-icon"></path></g></svg><!--css_build_mark:third_party.javascript.youtube_components.tp_yt_iron_icon.tp.yt.iron.icon.css.js--><!--css_build_scope:tp-yt-iron-icon--><!--css_build_styles:third_party.javascript.youtube_components.tp_yt_iron_icon.tp.yt.iron.icon.css.js-->
</tp-yt-iron-icon><ytcp-paper-tooltip for="help-icon" position="top" type="explanatory" class="style-scope ytcp-form-input-container"><!--css_build_mark:video.youtube.src.web.polymer.creator_studio.shared.widgets.ytcp_paper_tooltip.ytcp_paper_tooltip.ytcp.paper.tooltip.css.js--><!--css-build:shady--><!--css_build_scope:ytcp-paper-tooltip--><!--css_build_styles:video.youtube.src.web.polymer.shared.ui.styles.yt_base_styles.yt.base.styles.css.js,video.youtube.src.web.polymer.creator_studio.shared.styles.ytcp_styles.ytcp.styles.css.js,video.youtube.src.web.polymer.creator_studio.shared.widgets.ytcp_paper_tooltip.ytcp_paper_tooltip.ytcp.paper.tooltip.css.js-->
<ytcp-paper-tooltip-placeholder role="tooltip" class="style-scope ytcp-paper-tooltip" disable-upgrade="" id="goog_929542190">
  <div id="slot-wrapper" class="style-scope ytcp-paper-tooltip"></div>
  <div id="tooltip-placeholder-fake-slot" class="style-scope ytcp-paper-tooltip"><ytcp-paper-tooltip-body class="style-scope ytcp-form-input-container"><!--css_build_mark:video.youtube.src.web.polymer.creator_studio.shared.widgets.ytcp_paper_tooltip.ytcp_paper_tooltip_body.ytcp.paper.tooltip.body.css.js--><!--css-build:shady--><!--css_build_scope:ytcp-paper-tooltip-body--><!--css_build_styles:video.youtube.src.web.polymer.shared.ui.styles.yt_base_styles.yt.base.styles.css.js,video.youtube.src.web.polymer.creator_studio.shared.styles.ytcp_styles.ytcp.styles.css.js,video.youtube.src.web.polymer.creator_studio.shared.widgets.ytcp_paper_tooltip.ytcp_paper_tooltip_body.ytcp.paper.tooltip.body.css.js-->
  <p class="style-scope ytcp-paper-tooltip-body"><yt-formatted-string class="style-scope ytcp-paper-tooltip-body">Writing descriptions with keywords can help viewers to find your videos more easily through search. You can give an overview of your video and place keywords at the beginning of the description.</yt-formatted-string></p>
<dom-repeat as="p" class="style-scope ytcp-paper-tooltip-body"></dom-repeat>
<dom-repeat as="message" class="style-scope ytcp-paper-tooltip-body"></dom-repeat>



  <p class="style-scope ytcp-paper-tooltip-body">
    <ytcp-anchor class="link style-scope ytcp-paper-tooltip-body"><!--css_build_mark:video.youtube.src.web.polymer.creator_studio.shared.widgets.ytcp_anchor.ytcp.anchor.css.js--><!--css-build:shady--><!--css_build_scope:ytcp-anchor--><!--css_build_styles:video.youtube.src.web.polymer.shared.ui.styles.yt_base_styles.yt.base.styles.css.js,video.youtube.src.web.polymer.creator_studio.shared.styles.ytcp_styles.ytcp.styles.css.js,video.youtube.src.web.polymer.creator_studio.shared.widgets.ytcp_anchor.ytcp.anchor.css.js--><a id="anchor" class="remove-default-style style-scope ytcp-anchor" href="https://creatoracademy.youtube.com/page/lesson/descriptions" target="_blank">
  <dom-if class="style-scope ytcp-anchor"></dom-if>
  <span class="text style-scope ytcp-anchor">
    
    
    
    Learn more
  </span>
  <dom-if class="style-scope ytcp-anchor"></dom-if>
</a>
</ytcp-anchor>
  </p>
<dom-repeat as="link" class="style-scope ytcp-paper-tooltip-body"></dom-repeat>
</ytcp-paper-tooltip-body></div>
  <dom-if class="style-scope ytcp-paper-tooltip"></dom-if>
</ytcp-paper-tooltip-placeholder>
</ytcp-paper-tooltip></div><dom-if class="style-scope ytcp-form-input-container"></dom-if></div><dom-if class="style-scope ytcp-form-input-container"></dom-if><div id="child-input" class="style-scope ytcp-form-input-container"><div slot="body" id="container-content" class="style-scope ytcp-social-suggestions-textbox">
    <ytcp-social-suggestion-input id="input" class="fill-height style-scope ytcp-social-suggestions-textbox"><!--css_build_mark:video.youtube.src.web.polymer.creator_studio.shared.widgets.social_suggestions.ytcp_social_suggestion_input.ytcp.social.suggestion.input.css.js--><!--css-build:shady--><!--css_build_scope:ytcp-social-suggestion-input--><!--css_build_styles:video.youtube.src.web.polymer.shared.ui.styles.yt_base_styles.yt.base.styles.css.js,video.youtube.src.web.polymer.creator_studio.shared.styles.ytcp_styles.ytcp.styles.css.js,video.youtube.src.web.polymer.creator_studio.shared.widgets.social_suggestions.ytcp_social_suggestion_input.ytcp.social.suggestion.input.css.js--><div id="textbox" slot="input" contenteditable="true" class="style-scope ytcp-social-suggestions-textbox" aria-required="false" aria-label="Tell viewers about your video (type @ to mention a channel)" aria-invalid="false"></div>
</ytcp-social-suggestion-input>
    <div class="container-bottom style-scope ytcp-social-suggestions-textbox">
      <dom-if class="style-scope ytcp-social-suggestions-textbox"></dom-if>

      <div class="char-counter style-scope ytcp-social-suggestions-textbox">0/5000</div>
    </div>
  </div></div></div>

Advertisement

Answer

Description Box

Use the CSS selector #textbox[aria-label="Tell viewers about your video (type @ to mention a channel)". An HTML page should have only a single id attribute. But, since, there are multiple elements with id textbox. Therefore, we have also to specify some other attributes. I used aria-label here.

The complete code for updating the description will be:

let descriptionElement = document.querySelector('#textbox[aria-label="Tell viewers about your video (type @ to mention a channel)"]');
descriptionElement.textContent = 'This is the updated description text';

Title

If you also want to update the title, you can do that as:

let titleElement = document.getElementById('textbox');
titleElement.textContent = 'updated title'

Tags

For updating the tags, Use the following script:

let tagsElement = document.querySelector('#text-input[aria-label="Tags"]');

let string = 'hello,world'; // comma-separated tags
let tags = string.split(',');

// alternatively, you can initilize tags as 
// let tags = ['hello', 'world'];

tags.forEach(tag => {
    tagsElement.value = tag;
    tagsElement.dispatchEvent(new KeyboardEvent('keyup', {key: ','}));
});
Advertisement