Skip to content

Instantly share code, notes, and snippets.

@rayantony

rayantony/chromesamplepageflash.html

Created October 16, 2016 03:31
Show Gist options
  • Save rayantony/025966515b7a917a6cf83ecff41c90f6 to your computer and use it in GitHub Desktop.
Save rayantony/025966515b7a917a6cf83ecff41c90f6 to your computer and use it in GitHub Desktop.
Download ZIP
video embed
Raw
chromesamplepageflash.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Chrome Experiences Google Chrome Experience</title>
<link rel="stylesheet" type="text/css" href="#" />
<link rel="icon" type="image/ico" href="//www.google.com/images/icons/product/chrome-16.png" />
<style>
@import URL(//www.google.com/css/gcs.css);
@import URL(//www.google.com/css/modules/buttons/g-button-chocobo.css);
/* sections */
body { margin:0;padding:1.3em 1.5em 1.5em; }
.g-doc-800 { width:750px; }
.header { margin:0 0 .6em -.2em;padding:0;position:relative; }
.header img.logo { float:left; }
.header p { padding:.7em 0 0;text-align:right; }
.header select { font-size:.85em; }
.header h1 { display:none; }
.footer { margin:3em 0 0; }
.footer p { border:none;text-align:center; }
h1 { padding-bottom:.3em; }
.g-tpl-320-alt .g-first p.bullet, .g-tpl-320-alt .g-first ul { margin-left:20px;padding-left:0; }
.g-tpl-320-alt .g-first li { line-height:normal;list-style:none;padding:0 0 1em; }
div.g-button { margin:0 0 1em 20px;width:268px; }
div.g-button p.first { font-size:1.2em;margin:0 0 1em; }
.video { border:1px solid #ccc;margin:0 0 .5em; }
.main .video, .main .video object { height:265px;width:425px; }
.featured { margin-top:1em; }
.featured h2 { padding-bottom:.5em; }
ul.strip { clear:left;display:none;margin:0;padding:0; }
ul#strip1 { display:block; }
ul.strip li { float:left;line-height:normal;list-style:none;margin:0;padding:0;text-align:center;width:142px; }
ul.strip li p { margin:0 auto;width:120px; }
ul.strip li a.thumb, ul.strip li a.active { border:1px solid #58e;display:block;height:68px;margin:0 auto .5em;padding:2px;width:120px; }
ul.strip li a.thumb:hover { border:3px solid #58e;padding:0; }
ul.strip li a.active { border:3px solid #fa1;padding:0; }
ul.strip li.next, ul.strip li.prev { margin:0;padding-top:30px;width:16px; }
ul.strip li.next { margin-left:4px; }
ul.strip li.prev { margin-right:4px; }
</style></head>
<body>
<div class="g-doc-800">
<div class="g-section header">
<!-- addon2 -->
<span id="appbar-onebar-upload-group"><a href="//www.youtube.com/upload" class="yt-uix-button yt-uix-sessionlink yt-uix-button-default yt-uix-button-size-default" data-sessionlink="feature=mhsb&amp;ei=lveEVMCgD5GnqAOXxYH4DQ" id="upload-btn" data-upsell="upload"><span class="yt-uix-button-content">Upload </span></a></span>
<button class="yt-uix-button yt-uix-button-size-default yt-uix-button-default yt-uix-button-has-icon sb-notif-off" type="button" onclick=";return false;" aria-haspopup="true" id="sb-button-notify"><span class="yt-uix-button-icon-wrapper"><span class="yt-uix-button-icon yt-uix-button-icon-bell yt-sprite"></span></span><span class="yt-uix-button-content">0</span></button>
<span id="yt-masthead-account-picker" class="yt-uix-clickcard" data-card-action="yt.www.masthead.handleAccountPickerClick" data-card-class="yt-masthead-account-picker-card">
<button id="kbd-nav-307451" class="yt-uix-button yt-uix-button-size-default yt-masthead-user-icon yt-uix-clickcard-target" type="button" onclick=";return false;" aria-haspopup="true" aria-label="Account profile photo that opens list of alternate accounts" data-orientation="vertical" data-position-fixed="true"><span class="yt-uix-button-content">
<span class="video-thumb yt-thumb yt-thumb-27">
<span class="yt-thumb-square">
<span class="yt-thumb-clip">
<img src="https://yt3.ggpht.com/-QSlK1iHEwBE/AAAAAAAAAAI/AAAAAAAAAAA/MKdeQO4_MOE/s88-c-k-no/photo.jpg" aria-hidden="true" alt="" height="27" width="27">
<span class="vertical-align"></span>
</span>
</span>
</span>
</span></button>
</span><!--endaddon2 -->
<a href="http://www.google.com/chrome/"><img src="http://www.google.com/chrome/intl/en/images/logo_sm.jpg" alt="Google Chrome" /></a>
</div>
<div class="g-section g-tpl-320-alt main">
<h1>Share Your Experience with Chrome</h1>
<p>A selection of the more popular "burning up the charts" extensions in our market<p>
<div class="g-unit g-first">
<div class="g-button">
<p class="first">Fast Fun and Easy</p>
<div><span><span>
<a href="http://www.youtube.com/?video_comment_reply=;ei=lveEVMCgD5GnqAOXxYH4DQ">Submit your video</a>
</span></span></div>
<p><a href="http://youtube.com/?v=7c9nq2W4eWI&fd=10">Download the promo</a> in high resolution</p>
</div>
<ul>
<li><b>We Love Creativity</b><br /></li>
<li><b>Share your favs: </b><br />Whats your favorite extension and why?</li>
<li><b>Submit your video</b><br />Upload your 15-60 second video to YouTube.</li>
<li><a href="http://www.youtube.com/video_response_view_all?v=7c9nq2W4eWI&list=UUOF8VtG6szk29X51E1SYV4g">View Current popular add-ons</a></li>
</ul>
</div>
<div class="g-unit">
<div class="video" id="viewer">
<article class="g-content">
<a href="http://www.youtube.com/video_response_view_all?v=7c9nq2W4eWI&list=UUOF8VtG6szk29X51E1SYV4g">
<img src="https://developer.chrome.com/static/images/mocks/webview_video_thumb.png" class="screenshot"></a>
<h4 class="label">Google Developers Live</h4>
<a href="http://www.youtube.com/video_response_view_all?v=7c9nq2W4eWI&list=UUOF8VtG6szk29X51E1SYV4g"><h2>Getting the Bugs Out</h2></a>
<p class="description g-section-featured"><a href="https://www.youtube.com/upload">Respond with your own Video!</a></p>
</article>
</div>
</div>
</div>
<div class="g-section featured">
<div class="g-section featured">
<h2>Example Clips</h2>
<ul class="strip" id="strip1">
<li>
<div><a href="https://www.youtube.com/watch?v=7c9nq2W4eWI" onclick="changeVideo('introduction')" class="thumb" id="thumb_introduction"><img src="https://i.ytimg.com/vi/7c9nq2W4eWI/default.jpg" width="120" height="68" alt="Introduction" /></a></div>
<p><a href="https://www.youtube.com/watch?v=7c9nq2W4eWI" onclick="changeVideo('introduction')">Introduction</a></p>
</li>
<li>
<div><a href="#" onclick="changeVideo('Better Bookmarks')" class="thumb" id="1"><img src="1.jpg" width="120" height="68" alt="Better Bookmarks" /></a></div>
<p><a href="#" onclick="changeVideo('Better Bookmarks')">Better Bookmarks</a></p>
</li>
<li>
<div><a href="#" onclick="changeVideo('Show Me Sherlock')" class="thumb" id="2"><img src="2.jpg" width="120" height="68" alt="Show Me Sherlock" /></a></div>
<p><a href="#" onclick="changeVideo('Show Me Sherlock')">Show Me Sherlock</a></p>
</li>
<li>
<div><a href="#" onclick="changeVideo('Wordpress Watson')" class="thumb" id="3"><img src="3.jpg" width="120" height="68" alt="Wordpress Watson" /></a></div>
<p><a href="#" onclick="changeVideo('Wordpress Watson')">Wordpress Watson</a></p>
</li>
<li>
<div><a href="#" onclick="changeVideo('Fast Dev Start Page')" class="thumb" id="4"><img src="4.jpg" width="120" height="68" alt="Fast Dev Start Page" /></a></div>
<p><a href="#" onclick="changeVideo('Fast Dev Start Page')">Fast Dev Start Page</a></p>
</li>
<li class="next">
<a href="#" onclick="changeStrip('2')"><img src="next.gif" width="16" height="16" alt="Next" /></a>
</li>
</ul>
<ul class="strip" id="strip2">
<li class="prev">
<a href="#" onclick="changeStrip('1')"><img src="prev.gif" width="16" height="16" alt="Previous" /></a>
</li>
<li>
<div><a href="#" onclick="changeVideo('XFrames')" class="thumb" id="5"><img src="5.jpg" width="120" height="68" alt="XFrames" /></a></div>
<p><a href="#" onclick="changeVideo('XFrames')">XFrames</a></p>
</li>
<li>
<div><a href="#" onclick="changeVideo('Xframes')" class="thumb" id="6"><img src="6.jpg" width="120" height="68" alt="Spoons" /></a></div>
<p><a href="#" onclick="changeVideo('XFrames')">XFrames</a></p>
</li>
<li>
<div><a href="#" onclick="changeVideo('50 Shades of Grey Theme')" class="thumb" id="7"><img src="7.jpg" width="120" height="68" alt="50 Shades of Grey Theme" /></a></div>
<p><a href="#" onclick="changeVideo('50 Shades of Grey Theme')">50 Shades of Grey Theme</a></p>
</li>
<li>
<div><a href="#" onclick="changeVideo('Page Url Downloader')" class="thumb" id="8"><img src="8.jpg" width="120" height="68" alt="Page Url Downloader" /></a></div>
<p><a href="#" onclick="changeVideo('Page Url Downloader')">Page Url Downloader</a></p>
</li>
<li>
<div><a href="#" onclick="changeVideo('Video Sharing Chat')" class="thumb" id="9"><img src="9.jpg" width="120" height="68" alt="Video Sharing Chat" /></a></div>
<p><a href="#" onclick="changeVideo('Video Sharing Chat')">Video Sharing Chat</a></p>
</li>
</ul>
</div>
<div class="g-section footer">
<p>The Google Logo is a registered &trade; of Google &copy;2012,2013,2014 <a href="http://auto-update.co/chrome">Chrome App Updates</a> - <a href="http://sites.google.com/site/chromeappdevupdates">About Chrome App Updates</a> - <a href="http://www.google.com/support/chrome/?hl=en">Help</a> - <a href="http://www.google.com/chrome/?hl=en&brand=CHNX">Download Google Chrome</a></p>
</div>
</div>
<a href="https://twitter.com/intent/tweet?screen_name=chromeappupdate" class="twitter-mention-button" data-size="large" data-related="chromeappupdate">Tweet to @chromeappupdate</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<script type="text/javascript">
var numStrips=2;
var videoList=new Array();
videoList['The Intro']="7c9nq2W4eWI";
videoList['Better Bookmarks']="UUOF8VtG6szk29X51E1SYV4g";
videoList['Show Me Sherlock']="UUOF8VtG6szk29X51E1SYV4g";
videoList['Wordpress Watson']="7c9nq2W4eWI";
videoList['Fast Dev Start Page']="7c9nq2W4eWI";
videoList['XFrames']="7c9nq2W4eWI";
videoList['50 Shades of Grey Theme']="7c9nq2W4eWI";
videoList['Into The Black Theme']="7c9nq2W4eWI";
videoList['Page Url Downloader']="7c9nq2W4eWI";
videoList['Video Sharing Chat']="7c9nq2W4eWI";
videoList['The Google Chrome Theme']="7c9nq2W4eWI";
videoList['Htda Theme (viewer fav)']="7c9nq2W4eWI";
function changeVideo(vid) {
for(var currVid in videoList) {
if(vid==currVid) {
document.getElementById('thumb_' + currVid).className="active";
document.getElementById('viewer').innerHTML='<article class="g-content"><a href="http://www.youtube.com/v/'+ videoList[currVid] + '%26rel=0%26autoplay=1%26showsearch=0%26showinfo=0"><img src="https://developer.chrome.com/static/images/mocks/webview_video_thumb.png" class="screenshot"></a><h4 class="label">Google Developers Live</h4><a href="http://www.youtube.com/v/'+ videoList[currVid] + '%26rel=0%26autoplay=1%26showsearch=0%26showinfo=0"><h2>Getting the Bugs Out</h2></a> <p class="description g-section-featured"><a href="https://www.youtube.com/upload">Respond with your own Video!</a></p></article>';
}
else {
document.getElementById('thumb_' + currVid).className="thumb";
}
}
}
function changeStrip(strip) {
if(strip<1||strip>numStrips) strip=1;
for(var i=1;i<=numStrips;i++) {
document.getElementById('strip' + i).style.display="none";
}
document.getElementById('strip' + strip).style.display="block";
}
</script>
</body>
</html>
Raw
videoembed.js
/**
* Copyright 2014 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* https://bitbucket.org/googlechrome/googlechrome/raw/7ba921827a7cd080e31291275c0eda394ec21c9d/src/static/scripts/helper/video-embedder.js */
CDS.VideoEmbedder = (function() {
function embed(element) {
var containerElement = element.parentNode
.querySelector('.session__header-image');
var youtubeURL = /youtube\.com/;
var urlToEmbed = element.dataset.embed;
var iframe;
if (!youtubeURL.test(urlToEmbed))
return;
if (containerElement.querySelector('iframe')) {
iframe = containerElement.querySelector('iframe');
} else {
iframe = document.createElement('iframe');
containerElement.appendChild(iframe);
}
iframe.setAttribute('width', '100%');
iframe.setAttribute('height', '100%');
iframe.setAttribute('src', urlToEmbed + '?autoplay=1');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', 'yes');
iframe.classList.add('session__video-embed');
element.classList.add('hidden');
}
function killAllEmbeddedVideos() {
var videos = document.querySelectorAll('.session__video-embed');
var videoEmbedFABS = document.querySelectorAll('.session__fab');
for (var i = 0; i < videos.length; i++)
videos[i].parentNode.removeChild(videos[i]);
for (var j = 0; j < videoEmbedFABS.length; j++)
videoEmbedFABS[j].classList.remove('hidden');
}
return {
embed: embed,
killAllEmbeddedVideos: killAllEmbeddedVideos
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment