Skip to content

Instantly share code, notes, and snippets.

View jramsahai's full-sized avatar

Ji Ramsahai jramsahai

2 followers · 1 following
View GitHub Profile
@jramsahai
jramsahai / button_annotation.html
Created March 23, 2017 16:10
Button Annotation
<style type="text/css">.whitepaper-btn-wrapper {
display: inline-block;
text-align: center;
margin: 0 auto;
padding: 10px 20px;
text-align: left;
background-color: #61c661;
border: 1.5px solid #4ebf4e;
border-radius: 2px;
box-shadow: 0 1.5px rgba(0,0,0,0.15);
@jramsahai
jramsahai / shopping_cart.html
Created March 23, 2017 16:08
Shopping Cart
<!-- <blockquote class="embedly-card" data-card-key="64e7e6b1d2ac4b3fa812d17b66e43c22" data-card-controls="0" data-card-image="http://az347637.vo.msecnd.net/3e9286d37fb94f72ba128eb8fe76d6be/Images/Products30126-445x593--1943498993.jpg" data-card-type="article"><h4><a href="http://www.laura.ca/30126-Jacquard-Printed-Pashmina-Scarf.aspx?gclid=CNusgJTPpc8CFQiqaQodAvwEoQ">Jacquard Printed Pashmina Scarf</a></h4><p>You'll love the purple accents on our classic pashmina scarf. The jacquard finish adds a chic feel for an effortless every-day essential. Imported 7030772-0859</p></blockquote><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script> --><link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet" /><style type="text/css">* {
font-family: Oxygen,Arial,"Helvetica Neue",Helvetica,sans-serif;
}
.wrapper {
margin: 10px;
}
.wrapper a {
color: blue;
@jramsahai
jramsahai / form_annotation.html
Created March 23, 2017 16:06
Form Annotations
<script>
$(function() {
$("input[type=submit]").click(function() {
API.closeCta({ disablePlay: true });
});
});
</script><style type="text/css">.newsletter-signup {
position: relative;
max-width: 600px;
margin: 0 auto;
@jramsahai
jramsahai / dynamically_resize_iframe_inline_player.html
Last active February 8, 2017 05:15
DEPRECATED: Do not use this anymore. Use this instead: https://gist.github.com/jramsahai/7892535 I ran into a responsive design problem where the player was being cut off because the player itself would become wider than the content area as the width of the screen shrunk.
<html>
<head>
<style type="text/css">
#playerdiv {
width: 100%;
height: 100%;
position: relative;
max-width: 640px;
max-height: 360px;
display:block;
@jramsahai
jramsahai / personalization.html
Last active September 29, 2016 13:45
[DEPRECATED] This is no longer necessary as the javascript player embed will now read the custom ID.
<html>
<head>
<style type="text/css">
#innerContainer {
position: relative;
display: block;
width: 100% !important;
height: 0;
padding: 56.25% 0 0 0; /* This should reflect your video aspect ratio */
}
@jramsahai
jramsahai / no_mobile.html
Created September 27, 2016 14:43
Don't render player on mobile (Courtesy of Habby)
<script>
$(function(){
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
@jramsahai
jramsahai / embed_in_eloqua.html
Last active July 19, 2016 18:00
The following JavaScript and HTML is required for embedding on an Eloqua landing page. Note that this is not required for embedding on an Eloqua HTML landing page.
<!--
Replace [UUID] with the UUID of the player you are attemping to embed.
To find the UUID of a player, see http://support.vidyard.com/articles/Public_Support/Find-the-UUID-for-your-player/
-->
<div id="[UUID]">
</div>
@jramsahai
jramsahai / progress_events_v1_sample.html
Last active June 23, 2016 03:50
The Vidyard Progress Events Framework will allow you to execute arbitrary javascript at fixed intervals during the playback of the video. This basic example will write view data to the browser console.
<!--
Include this script below: Google Analytics, Player Embed(s), and Vidyard API
Example Customer Implementations:
VidyardProgressEvents(function (result){console.log(result.event)});
VidyardProgressEvents(function (result){console.log(result.event)}, [1,10,20,30,40,50,60,70,80,90]);
// Returns:
// result.event as integer
// result.chapter as integer
// result.player as a Vidyard player object
-->
@jramsahai
jramsahai / gtm_vidyard_event_listener.html
Last active June 23, 2016 03:48
We've worked with the Cardinal Path team quite a bit on projects using the Progress Events framework. I was asked to build out a setup into Google Tag Manager based off the instructions found here: http://www.cardinalpath.com/youtube-video-tracking-with-google-tag-manager-v2-and-universal-analytics-a-step-by-step-guide/
<script type='text/javascript' src="//play.vidyard.com/v0/api.js"></script>
<script type='text/javascript' src="//play.vidyard.com/v1/progress-events.js"></script>
<script type='text/javascript'>
VidyardProgressEvents(function (result){
if (result.event==1) {
dataLayer.push({
event: 'vidyard',
eventCategory: 'video',
eventAction: "Play",
eventLabel: result.player.metadata.chapters_attributes[result.chapter].video_attributes.name
@jramsahai
jramsahai / autoplay_next_video.html
Last active June 21, 2016 13:24
We get a lot of requests on how to achieve the design you see over at http://www.vidyard.com/tour. Try playing the first video, and you'll see what I mean. Admittedly, it's a pretty sweet effect that makes use of the Vidyard javascript player API and a third party script that handles the page scrolling. Here's a sample page that makes use of thi…
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div class="tour_section" id="tour_section_1">
<script type="text/javascript" id="vidyard_embed_code_88eO52vbto7om8vPVV6lZw" src="//play.vidyard.com/88eO52vbto7om8vPVV6lZw.js?v=3.1&type=inline"></script>
</div>
.<br />