tedshd's DevNote

Develop & Design Note by Ted

Your posts match “ youtube ” tag:

JavaScript - YouTube API note

JavaScript - YouTube API note

player demo
YouTube JavaScript Player API Reference
YouTube 嵌入式播放器参数
YouTube Embedded Players and Player Parameters
YouTube Player API Reference for iframe Embeds

Use YouTube video must init a youtube player
There have 2 player we can use

  • flash player
  • iframe player

I suggest use iframe player because it can support flash and HTML5
If use Apple mobile devices, they can't support flash
Use iframe player can solve this problem
We can use javascript control player

This is a note to iframe API

embed script

<script src="https://www.youtube.com/iframe_api"></script>

JavaScript generate

var tag = document.createElement('script'),
    firstScriptTag = document.getElementsByTagName('script')[0];
tag.src = 'https://www.youtube.com/iframe_api';
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

1.First check load iframe API

function onYouTubeIframeAPIReady() {
    // do something


2.Init YouTube player

var player;
player = new YT.Player(
        width: '1280', // player width

        height: '720', // player height

        videoId: videoList[0], // youtube id ex: '0lfDNu-k6oo'

        playerVars: {
            rel: 1,
            autoplay: 0,
            disablekb: 0,
            showsearch: 0,
            showinfo: 0,
            controls: 1,
            wmode: 'opaque',
            hd: 1,
            html5: 1,
            iv_load_policy: 3
        events: {
            'onReady'        : onPlayerReady,
            'onStateChange'  : onPlayerStateChange,
            'onError'        : error

playerVars can refer YouTube 嵌入式播放器参数

3.Handle onPlayerReady, onPlayerStateChange, error

function onPlayerReady(e) {
    // do something


function onPlayerStateChange(e) {
    // do something


function error(e) {
    // do something


Sample code

<!DOCTYPE html>
<meta charset="utf-8">
    <div id="player"></div>
    var player;

    function loadPlayer() {
        if (document.querySelector('#player')) {
            // get API

            var tag = document.createElement('script'),
            firstScriptTag = document.getElementsByTagName('script')[0];
            tag.src = 'https://www.youtube.com/iframe_api';
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            var videoList = [],
                playCount = 0;

            var video_ID = {
                'v_2': 'V8BTsiMxyaQ',
                'v_0': '7wvNwOPprBE',
                'v_1': 'mTSuiGubCHE',
                'v_8': 'DDs5bXh4erM',
                'v_3': 'n-BXNXvTvV4',
                'v_4': 'CRJDQQXS4uE',
                'v_5': 'ASO_zypdnsQ',
                'v_6': 'IZkYdqRWKaY',
                'v_7': '9Y15es8OY0U',
                'v_9': 'LWV-f6dMN3Q'

            // videoList array

            for(var key in video_ID) {
                var value = video_ID[key];

            function playChannel() {
                // init player

                player = new YT.Player(
                        width: '1280',
                        height: '720',
                        videoId: videoList[0],
                        playerVars: {
                            rel: 1,
                            autoplay: 1,
                            disablekb: 0,
                            showsearch: 0,
                            showinfo: 0,
                            controls: 1,
                            autohide: 0,
                            modestbranding: 0,
                            wmode: 'opaque',
                            hd: 1,
                            html5: 1,
                            iv_load_policy: 3
                        events: {
                            'onReady'        : onPlayerReady,
                            'onStateChange'  : onPlayerStateChange,
                            'onError'        : error

                // play video

                function onPlayerReady(e) {

                function error(e) {

            function onPlayerStateChange(e) {
                // get state


                // play list loop when video end play next video

                if (e.data === 0) {
                    if (playCount > (videoList.length -1)) {
                        playCount = 0;


            function onYouTubeIframeAPIReady() {

            setTimeout(function() {
            }, 1200);


Refer - Force HTML5 youtube video

onError error code

  • 2 – The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.
  • 5 – The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.
  • 100 – The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.
  • 101 – The owner of the requested video does not allow it to be played in embedded players.
  • 150 – This error is the same as 101. It's just a 101 error in disguise!

Youtube Data api

Get video data api


It return format is XML


It return format is json

参考指南:Data API 协议
Developer's Guide: JSON / JavaScript
Refer- How to ensure YouTube API only returns videos that are streamable on iPhone?

Something note

Player API 其中有個參數允許強制使用 HTML5 player 這建議有個好處與壞處
壞處是如果遇到訊源只有 flash 格式的影片 player 會重啟為 flash player
用 gData 抓影片資訊可抓到其中一個 content 的 key 其中就有提供此影片所帶有的格式
test page

  • 5 - HTTP URL to the embeddable player (SWF) for this video. This format is not available for a video that is not embeddable. Developers commonly add &format=5 to their queries to restrict results to videos that can be embedded on their sites.
  • 1 - RTSP streaming URL for mobile video playback. H.263 video (up to 176x144) and AMR audio.
  • 6 - RTSP streaming URL for mobile video playback. MPEG-4 SP video (up to 176x144) and AAC audio.

Refer - Reference Guide: Data API Protocol

實測在 mobile 裝置上(Android, iOS), 參數設定 autoplay 是無效的, 利用 JavaScript 控制讓 youtube 播放也是無效的, 必須用手去點擊播放

youtube-dl - 使用筆記

youtube-dl - 使用筆記

youtube-dl 是一個跟影音相關方便使用的 cli 工具


列出該影片可以下載的 format

youtube-dl -F <URL>


[youtube] e17Um7wExuQ: Downloading webpage
[youtube] e17Um7wExuQ: Downloading video info webpage
[info] Available formats for e17Um7wExuQ:
format code  extension  resolution note
249          webm       audio only tiny   54k , opus @ 50k (48000Hz), 192.69KiB
250          webm       audio only tiny   72k , opus @ 70k (48000Hz), 255.58KiB
140          m4a        audio only tiny  130k , m4a_dash container, mp4a.40.2@128k (44100Hz), 476.29KiB
251          webm       audio only tiny  138k , opus @160k (48000Hz), 500.94KiB
278          webm       82x144     144p   32k , webm container, vp9, 30fps, video only, 105.14KiB
160          mp4        82x144     144p   43k , avc1.4d400b, 30fps, video only, 147.87KiB
242          webm       136x240    144p   72k , vp9, 30fps, video only, 224.00KiB
133          mp4        136x240    144p   90k , avc1.4d400c, 30fps, video only, 303.08KiB
243          webm       202x360    240p  130k , vp9, 30fps, video only, 379.65KiB
134          mp4        202x360    240p  219k , avc1.4d400d, 30fps, video only, 659.67KiB
244          webm       270x480    240p  235k , vp9, 30fps, video only, 670.44KiB
135          mp4        270x480    240p  375k , avc1.4d4015, 30fps, video only, 1.10MiB
247          webm       406x720    360p  428k , vp9, 30fps, video only, 1.19MiB
248          webm       608x1080   480p  737k , vp9, 30fps, video only, 2.03MiB
136          mp4        406x720    360p  761k , avc1.4d401e, 30fps, video only, 2.09MiB
137          mp4        608x1080   480p 1458k , avc1.64001f, 30fps, video only, 3.95MiB
271          webm       810x1440   720p 2767k , vp9, 30fps, video only, 6.69MiB
313          webm       1080x1920  1080p 4410k , vp9, 30fps, video only, 12.22MiB
43           webm       640x360    360p , vp8.0, vorbis@128k, 1.28MiB
18           mp4        202x360    240p  359k , avc1.42001E, mp4a.40.2@ 96k (44100Hz), 1.29MiB
22           mp4        406x720    360p  713k , avc1.64001F, mp4a.40.2@192k (44100Hz) (best)

下載指定的 format

youtube-dl -f <format code> <URL>


youtube-dl -f best <URL>

下載指定的 format

youtube-dl -f mp4 <URL>

SEO - 增強 Youtube video SEO

增強 Youtube video SEO




雖然已經是 2016 的文章


雖然這文章有在業配服務 XD





Video Information

Video Content
  • 以解決需求為優先
  • 產品介紹
  • 教程
  • 知識分享
Video Length

While aggregated clicks are still counted, the amount of engagement on your videos play a huge role like the likes, dislikes, comments, watch time, shares, views on other sites, engagement on other sites. This required YouTubers to create better videos with more engaging content in order to rank higher.

  • 點擊
  • like
  • dislike
  • 評論
  • 觀看時間
  • 分享到其他地方(影片的擴散)

Make your videos at least at least 2 minutes in length; it’ll be really good if it’s 10 but don’t compromise the quality for Watch Time. If your viewers are engaged in your video for a longer duration, your videos will rank better. But if you’re just stretching your videos for this, you won’t be able to keep a user on your video and they won’t rank well.

  • 最少兩分鐘
  • 十分鐘非常好
Video Name
  1. Select finished video file that you will upload. Rename the file Video Title.
  2. And then right click on the file and select “Get Info/Properties”.
  3. Then go to “Details”.
  4. Add some tags related to the content.
  5. Under “Title” or “Name & Extension”, name the file which includes your top 2 keywords.
  6. Write a short description of your video in “Comments”

先編輯好影片檔案 meta 在上傳

  • Make it at least 200 words.
  • Use synonyms for your keywords.
  • Don’t stuff keywords or you won’t rank.
  • Write a different description for each video. Or it’ll go down as duplicated content.
  • Write out the video transcript using some software.
Make Playlists
Customise Thumbnails
Take advantage of Social Media

Search engine optimisation (SEO) has 3 facets:

  • On-page SEO– As in how your website is structured, image tags, keyword density, tags, etc.
  • Off-page SEO– Other domains that link back to your website.
  • Relevance– As in how many people found it helpful. This is measured by Social media engagement, like how many people liked it, shared it, etc. Make this process easier by syncing your YouTube account with your social media accounts, and post your videos on your profile and relevant pages.
Make Your Channel Page Pretty

YouTube sees a channel without a profile picture, header, description and links as spam. It is an additional ranking hack, adds a pop to your channel, and can show what your videos are about.

  • Add links to all your social media accounts.
  • Add a nice and relevant channel image and banner.
  • Write a long description in the about section (include synonym keywords).
  • Subscribe to similar channels.
Share Links

For beginners trying to understand SEO, stick with low competition/long tail keywords.

The hacks laid out above will rank any low competitive or long tail keyword. If you want to rank your video for added competitive terms you have to embed the HTML on other sites and build links to your video.

But make a few high-quality links steadily instead of spamming all at once. You can use link sources such as:

  • Private blog networks (PBN)
  • Other blogging sites like WordPress, Blogger, Tumblr
  • Social bookmarks
  • Guest posts
  • Your own site
  • Comment links on relevant places
  • Pinterest pins

利用其他 social mdeia 或管道增強曝光


Tags aren’t the most important, but they help a lot. They help YouTube and Google learn what your video is about. Targeted tags not only help you rank for your target keyword but get you to you show up more often as a related video in the sidebar area of YouTube. When someone’s watching a video with a similar tag as your video then you’re added to the sidebar.

下 tag 會幫助你顯示在其他相似 tag 的 video 旁邊的側邊欄

Types of Tags:

Tags are another important way to get ranking in youtube search, here are few tips to put tags in your video-

  • List Specific Tags first: These are one-word keywords that represent the topic at hand. If YouTube gives you pre-filled suggestions that are essentially what you want, then use those, but also use the same words in a generic way.

  • List Generic Tags: These are words like how-to, tutorial, and vlog. YouTube offers suggestions, so use them.

  • Also, Long-Tail Tags: These are multiple-word tags. You can just copy the title and use it as a tag, leaving out conjunctions and prepositions (such as “of,” “in,” “and,” etc.), because YouTube ignores these words.

  • Don’t miss the Misspellings: Derral misspells words on purpose because people search for these words. For eg. Some tags like these: “Ellen Show” and also “elen show” , “ellen degeneres” and “ellen degenrous”

先是重要的特殊專門的 tag

再來是一般的 tag

再來是長尾的 tag

最後加上一些容易拼錯的 tag

More Dos and Dont’s:
  • You can only use 500 characters in your tags.

  • Don’t use misleading tags as this process will end up working against you in the search algorithm.

  • YouTube uses the meta information to do a quick assessment of your video, then it ignores your meta data. However, when the meta data is updated, it can help you in search after a few weeks when YouTube inventories the data again.

  • If you use repetitive keywords across all your videos, they will have a higher likelihood of referring to each other in the suggested videos column on the right of the page. Setting default tags from settings can make that process easier.



Refer - How To Rank Your YouTube Video On The First Page Of Google Search Results

Refer - How To Use YouTube Tags To Rank Higher In Search Results






8 Types of CTAs you Should Be Using in Your YouTube Channel


Tube Buddy or vidIQ


Tube Buddy 個人蠻喜歡的

它有個不錯的功能是會給建議的 tags

但是它應該是從 title 找出相關的 tag



15 Inspiring YouTube Video Ideas to Build Your Brand



發現一個 Youtube 影片的搜尋結果很有趣

Google 會自動把內容擷取出來

有點類似 How to 的 video 結果