{"action":"created","comment":{"url":"https://api.github.com/repos/ampproject/amphtml/pulls/comments/52812205","id":52812205,"diff_hunk":"@@ -71,6 +84,48 @@ class AmpYoutube extends AMP.BaseElement {\n     // the playback.\n     return false;\n   }\n+\n+  /** @private */\n+  buildImagePlaceholder_() {\n+    const imgPlaceholder = new Image();\n+    const videoid = this.videoid_;\n+    function loadHQImage_() {\n+      // We only need to handle error once to load another source.\n+      imgPlaceholder.removeEventListener('error', loadHQImage_);\n+      imgPlaceholder.setAttribute('src', 'https://i.ytimg.com/vi/' +\n+          videoid + '/hqdefault.jpg');\n+    }\n+\n+    function maybeLoadHQImage_() {\n+      // We only need to handle error once to load another source.\n+      imgPlaceholder.removeEventListener('load', maybeLoadHQImage_);\n+      // A pretty ugly hack since onerror won't fire on YouTube image 404.\n+      // This might be due to the fact that YouTube returns data to the request\n+      // even when the status is 404.\n+      if ((this.naturalWidth === 120 && this.naturalHeight === 90) ||\n+          (this.width === 120 && this.height === 90)) {\n+        loadHQImage_();\n+      } else {\n+        imgPlaceholder.removeEventListener('error', loadHQImage_);\n+      }\n+    }\n+\n+    // Because sddefault.jpg isn't available for all videos, we try to load\n+    // it and fallback to hqdefault.jpg.\n+    imgPlaceholder.addEventListener('load', maybeLoadHQImage_);\n+    imgPlaceholder.addEventListener('error', loadHQImage_);\n+\n+    // TODO(mkhatib): Maybe add <source> children to allow the browser to\n+    // load the needed size or even better match YTPlayer logic for loading\n+    // player thumbnails for different screen sizes for a cache win!\n+    imgPlaceholder.setAttribute('src', 'https://i.ytimg.com/vi/' +\n+        this.videoid_ + '/sddefault.jpg');\n+    imgPlaceholder.setAttribute('placeholder', '');\n+    imgPlaceholder.width = this.width_;\n+    imgPlaceholder.height = this.height_;","path":"extensions/amp-youtube/0.1/amp-youtube.js","position":null,"original_position":102,"commit_id":"e7c92e1f0a8ac2de4e208d17e51c13a146917793","original_commit_id":"55017c43bc4132c1b1ef9f621237f25116296ad2","user":{"login":"mkhatib","id":2647,"avatar_url":"https://avatars.githubusercontent.com/u/2647?v=3","gravatar_id":"","url":"https://api.github.com/users/mkhatib","html_url":"https://github.com/mkhatib","followers_url":"https://api.github.com/users/mkhatib/followers","following_url":"https://api.github.com/users/mkhatib/following{/other_user}","gists_url":"https://api.github.com/users/mkhatib/gists{/gist_id}","starred_url":"https://api.github.com/users/mkhatib/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkhatib/subscriptions","organizations_url":"https://api.github.com/users/mkhatib/orgs","repos_url":"https://api.github.com/users/mkhatib/repos","events_url":"https://api.github.com/users/mkhatib/events{/privacy}","received_events_url":"https://api.github.com/users/mkhatib/received_events","type":"User","site_admin":false},"body":"Done. I only had to use `object-fit: 'cover'` instead of `contain` to match their styles.","created_at":"2016-02-12T23:23:08Z","updated_at":"2016-02-12T23:23:08Z","html_url":"https://github.com/ampproject/amphtml/pull/1950#discussion_r52812205","pull_request_url":"https://api.github.com/repos/ampproject/amphtml/pulls/1950","_links":{"self":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/comments/52812205"},"html":{"href":"https://github.com/ampproject/amphtml/pull/1950#discussion_r52812205"},"pull_request":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/1950"}}},"pull_request":{"url":"https://api.github.com/repos/ampproject/amphtml/pulls/1950","id":59086602,"html_url":"https://github.com/ampproject/amphtml/pull/1950","diff_url":"https://github.com/ampproject/amphtml/pull/1950.diff","patch_url":"https://github.com/ampproject/amphtml/pull/1950.patch","issue_url":"https://api.github.com/repos/ampproject/amphtml/issues/1950","number":1950,"state":"open","locked":false,"title":"Add image placeholder for amp-youtube during prerender","user":{"login":"mkhatib","id":2647,"avatar_url":"https://avatars.githubusercontent.com/u/2647?v=3","gravatar_id":"","url":"https://api.github.com/users/mkhatib","html_url":"https://github.com/mkhatib","followers_url":"https://api.github.com/users/mkhatib/followers","following_url":"https://api.github.com/users/mkhatib/following{/other_user}","gists_url":"https://api.github.com/users/mkhatib/gists{/gist_id}","starred_url":"https://api.github.com/users/mkhatib/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkhatib/subscriptions","organizations_url":"https://api.github.com/users/mkhatib/orgs","repos_url":"https://api.github.com/users/mkhatib/repos","events_url":"https://api.github.com/users/mkhatib/events{/privacy}","received_events_url":"https://api.github.com/users/mkhatib/received_events","type":"User","site_admin":false},"body":"This addresses #1656 \r\n\r\nNot sure if we want to do the fallback hack or just drop that all together and stick with loading `hqdefault` for all videos.\r\n\r\nAlso, probably need to work on better layouting for the image. Dima suggested we do this during the PR discussion. ","created_at":"2016-02-11T20:12:26Z","updated_at":"2016-02-12T23:23:08Z","closed_at":null,"merged_at":null,"merge_commit_sha":"16cada18f5228168010ff204900fbd2b5136fac0","assignee":{"login":"dvoytenko","id":726049,"avatar_url":"https://avatars.githubusercontent.com/u/726049?v=3","gravatar_id":"","url":"https://api.github.com/users/dvoytenko","html_url":"https://github.com/dvoytenko","followers_url":"https://api.github.com/users/dvoytenko/followers","following_url":"https://api.github.com/users/dvoytenko/following{/other_user}","gists_url":"https://api.github.com/users/dvoytenko/gists{/gist_id}","starred_url":"https://api.github.com/users/dvoytenko/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/dvoytenko/subscriptions","organizations_url":"https://api.github.com/users/dvoytenko/orgs","repos_url":"https://api.github.com/users/dvoytenko/repos","events_url":"https://api.github.com/users/dvoytenko/events{/privacy}","received_events_url":"https://api.github.com/users/dvoytenko/received_events","type":"User","site_admin":false},"milestone":null,"commits_url":"https://api.github.com/repos/ampproject/amphtml/pulls/1950/commits","review_comments_url":"https://api.github.com/repos/ampproject/amphtml/pulls/1950/comments","review_comment_url":"https://api.github.com/repos/ampproject/amphtml/pulls/comments{/number}","comments_url":"https://api.github.com/repos/ampproject/amphtml/issues/1950/comments","statuses_url":"https://api.github.com/repos/ampproject/amphtml/statuses/e7c92e1f0a8ac2de4e208d17e51c13a146917793","head":{"label":"mkhatib:amp-youtube-poster","ref":"amp-youtube-poster","sha":"e7c92e1f0a8ac2de4e208d17e51c13a146917793","user":{"login":"mkhatib","id":2647,"avatar_url":"https://avatars.githubusercontent.com/u/2647?v=3","gravatar_id":"","url":"https://api.github.com/users/mkhatib","html_url":"https://github.com/mkhatib","followers_url":"https://api.github.com/users/mkhatib/followers","following_url":"https://api.github.com/users/mkhatib/following{/other_user}","gists_url":"https://api.github.com/users/mkhatib/gists{/gist_id}","starred_url":"https://api.github.com/users/mkhatib/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkhatib/subscriptions","organizations_url":"https://api.github.com/users/mkhatib/orgs","repos_url":"https://api.github.com/users/mkhatib/repos","events_url":"https://api.github.com/users/mkhatib/events{/privacy}","received_events_url":"https://api.github.com/users/mkhatib/received_events","type":"User","site_admin":false},"repo":{"id":49671997,"name":"amphtml","full_name":"mkhatib/amphtml","owner":{"login":"mkhatib","id":2647,"avatar_url":"https://avatars.githubusercontent.com/u/2647?v=3","gravatar_id":"","url":"https://api.github.com/users/mkhatib","html_url":"https://github.com/mkhatib","followers_url":"https://api.github.com/users/mkhatib/followers","following_url":"https://api.github.com/users/mkhatib/following{/other_user}","gists_url":"https://api.github.com/users/mkhatib/gists{/gist_id}","starred_url":"https://api.github.com/users/mkhatib/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mkhatib/subscriptions","organizations_url":"https://api.github.com/users/mkhatib/orgs","repos_url":"https://api.github.com/users/mkhatib/repos","events_url":"https://api.github.com/users/mkhatib/events{/privacy}","received_events_url":"https://api.github.com/users/mkhatib/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/mkhatib/amphtml","description":"AMP HTML source code, samples, and documentation.  See below for more info.","fork":true,"url":"https://api.github.com/repos/mkhatib/amphtml","forks_url":"https://api.github.com/repos/mkhatib/amphtml/forks","keys_url":"https://api.github.com/repos/mkhatib/amphtml/keys{/key_id}","collaborators_url":"https://api.github.com/repos/mkhatib/amphtml/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/mkhatib/amphtml/teams","hooks_url":"https://api.github.com/repos/mkhatib/amphtml/hooks","issue_events_url":"https://api.github.com/repos/mkhatib/amphtml/issues/events{/number}","events_url":"https://api.github.com/repos/mkhatib/amphtml/events","assignees_url":"https://api.github.com/repos/mkhatib/amphtml/assignees{/user}","branches_url":"https://api.github.com/repos/mkhatib/amphtml/branches{/branch}","tags_url":"https://api.github.com/repos/mkhatib/amphtml/tags","blobs_url":"https://api.github.com/repos/mkhatib/amphtml/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/mkhatib/amphtml/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/mkhatib/amphtml/git/refs{/sha}","trees_url":"https://api.github.com/repos/mkhatib/amphtml/git/trees{/sha}","statuses_url":"https://api.github.com/repos/mkhatib/amphtml/statuses/{sha}","languages_url":"https://api.github.com/repos/mkhatib/amphtml/languages","stargazers_url":"https://api.github.com/repos/mkhatib/amphtml/stargazers","contributors_url":"https://api.github.com/repos/mkhatib/amphtml/contributors","subscribers_url":"https://api.github.com/repos/mkhatib/amphtml/subscribers","subscription_url":"https://api.github.com/repos/mkhatib/amphtml/subscription","commits_url":"https://api.github.com/repos/mkhatib/amphtml/commits{/sha}","git_commits_url":"https://api.github.com/repos/mkhatib/amphtml/git/commits{/sha}","comments_url":"https://api.github.com/repos/mkhatib/amphtml/comments{/number}","issue_comment_url":"https://api.github.com/repos/mkhatib/amphtml/issues/comments{/number}","contents_url":"https://api.github.com/repos/mkhatib/amphtml/contents/{+path}","compare_url":"https://api.github.com/repos/mkhatib/amphtml/compare/{base}...{head}","merges_url":"https://api.github.com/repos/mkhatib/amphtml/merges","archive_url":"https://api.github.com/repos/mkhatib/amphtml/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/mkhatib/amphtml/downloads","issues_url":"https://api.github.com/repos/mkhatib/amphtml/issues{/number}","pulls_url":"https://api.github.com/repos/mkhatib/amphtml/pulls{/number}","milestones_url":"https://api.github.com/repos/mkhatib/amphtml/milestones{/number}","notifications_url":"https://api.github.com/repos/mkhatib/amphtml/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/mkhatib/amphtml/labels{/name}","releases_url":"https://api.github.com/repos/mkhatib/amphtml/releases{/id}","deployments_url":"https://api.github.com/repos/mkhatib/amphtml/deployments","created_at":"2016-01-14T20:05:58Z","updated_at":"2016-01-14T20:06:00Z","pushed_at":"2016-02-12T23:19:42Z","git_url":"git://github.com/mkhatib/amphtml.git","ssh_url":"git@github.com:mkhatib/amphtml.git","clone_url":"https://github.com/mkhatib/amphtml.git","svn_url":"https://github.com/mkhatib/amphtml","homepage":"https://ampproject.org","size":23844,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":false,"has_downloads":false,"has_wiki":false,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":0,"forks":0,"open_issues":0,"watchers":0,"default_branch":"master"}},"base":{"label":"ampproject:master","ref":"master","sha":"34c5b8630697779a157ac7b1e4573564bae7a548","user":{"login":"ampproject","id":14114390,"avatar_url":"https://avatars.githubusercontent.com/u/14114390?v=3","gravatar_id":"","url":"https://api.github.com/users/ampproject","html_url":"https://github.com/ampproject","followers_url":"https://api.github.com/users/ampproject/followers","following_url":"https://api.github.com/users/ampproject/following{/other_user}","gists_url":"https://api.github.com/users/ampproject/gists{/gist_id}","starred_url":"https://api.github.com/users/ampproject/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ampproject/subscriptions","organizations_url":"https://api.github.com/users/ampproject/orgs","repos_url":"https://api.github.com/users/ampproject/repos","events_url":"https://api.github.com/users/ampproject/events{/privacy}","received_events_url":"https://api.github.com/users/ampproject/received_events","type":"Organization","site_admin":false},"repo":{"id":41766002,"name":"amphtml","full_name":"ampproject/amphtml","owner":{"login":"ampproject","id":14114390,"avatar_url":"https://avatars.githubusercontent.com/u/14114390?v=3","gravatar_id":"","url":"https://api.github.com/users/ampproject","html_url":"https://github.com/ampproject","followers_url":"https://api.github.com/users/ampproject/followers","following_url":"https://api.github.com/users/ampproject/following{/other_user}","gists_url":"https://api.github.com/users/ampproject/gists{/gist_id}","starred_url":"https://api.github.com/users/ampproject/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ampproject/subscriptions","organizations_url":"https://api.github.com/users/ampproject/orgs","repos_url":"https://api.github.com/users/ampproject/repos","events_url":"https://api.github.com/users/ampproject/events{/privacy}","received_events_url":"https://api.github.com/users/ampproject/received_events","type":"Organization","site_admin":false},"private":false,"html_url":"https://github.com/ampproject/amphtml","description":"AMP HTML source code, samples, and documentation.  See below for more info.","fork":false,"url":"https://api.github.com/repos/ampproject/amphtml","forks_url":"https://api.github.com/repos/ampproject/amphtml/forks","keys_url":"https://api.github.com/repos/ampproject/amphtml/keys{/key_id}","collaborators_url":"https://api.github.com/repos/ampproject/amphtml/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/ampproject/amphtml/teams","hooks_url":"https://api.github.com/repos/ampproject/amphtml/hooks","issue_events_url":"https://api.github.com/repos/ampproject/amphtml/issues/events{/number}","events_url":"https://api.github.com/repos/ampproject/amphtml/events","assignees_url":"https://api.github.com/repos/ampproject/amphtml/assignees{/user}","branches_url":"https://api.github.com/repos/ampproject/amphtml/branches{/branch}","tags_url":"https://api.github.com/repos/ampproject/amphtml/tags","blobs_url":"https://api.github.com/repos/ampproject/amphtml/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/ampproject/amphtml/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/ampproject/amphtml/git/refs{/sha}","trees_url":"https://api.github.com/repos/ampproject/amphtml/git/trees{/sha}","statuses_url":"https://api.github.com/repos/ampproject/amphtml/statuses/{sha}","languages_url":"https://api.github.com/repos/ampproject/amphtml/languages","stargazers_url":"https://api.github.com/repos/ampproject/amphtml/stargazers","contributors_url":"https://api.github.com/repos/ampproject/amphtml/contributors","subscribers_url":"https://api.github.com/repos/ampproject/amphtml/subscribers","subscription_url":"https://api.github.com/repos/ampproject/amphtml/subscription","commits_url":"https://api.github.com/repos/ampproject/amphtml/commits{/sha}","git_commits_url":"https://api.github.com/repos/ampproject/amphtml/git/commits{/sha}","comments_url":"https://api.github.com/repos/ampproject/amphtml/comments{/number}","issue_comment_url":"https://api.github.com/repos/ampproject/amphtml/issues/comments{/number}","contents_url":"https://api.github.com/repos/ampproject/amphtml/contents/{+path}","compare_url":"https://api.github.com/repos/ampproject/amphtml/compare/{base}...{head}","merges_url":"https://api.github.com/repos/ampproject/amphtml/merges","archive_url":"https://api.github.com/repos/ampproject/amphtml/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/ampproject/amphtml/downloads","issues_url":"https://api.github.com/repos/ampproject/amphtml/issues{/number}","pulls_url":"https://api.github.com/repos/ampproject/amphtml/pulls{/number}","milestones_url":"https://api.github.com/repos/ampproject/amphtml/milestones{/number}","notifications_url":"https://api.github.com/repos/ampproject/amphtml/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/ampproject/amphtml/labels{/name}","releases_url":"https://api.github.com/repos/ampproject/amphtml/releases{/id}","deployments_url":"https://api.github.com/repos/ampproject/amphtml/deployments","created_at":"2015-09-01T22:10:53Z","updated_at":"2016-02-12T22:19:00Z","pushed_at":"2016-02-12T23:19:43Z","git_url":"git://github.com/ampproject/amphtml.git","ssh_url":"git@github.com:ampproject/amphtml.git","clone_url":"https://github.com/ampproject/amphtml.git","svn_url":"https://github.com/ampproject/amphtml","homepage":"https://ampproject.org","size":27388,"stargazers_count":5737,"watchers_count":5737,"language":"JavaScript","has_issues":true,"has_downloads":false,"has_wiki":false,"has_pages":false,"forks_count":634,"mirror_url":null,"open_issues_count":318,"forks":634,"open_issues":318,"watchers":5737,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/1950"},"html":{"href":"https://github.com/ampproject/amphtml/pull/1950"},"issue":{"href":"https://api.github.com/repos/ampproject/amphtml/issues/1950"},"comments":{"href":"https://api.github.com/repos/ampproject/amphtml/issues/1950/comments"},"review_comments":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/1950/comments"},"review_comment":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/ampproject/amphtml/pulls/1950/commits"},"statuses":{"href":"https://api.github.com/repos/ampproject/amphtml/statuses/e7c92e1f0a8ac2de4e208d17e51c13a146917793"}}}}