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 / 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 / sample_adventure_final_cta.html
Created December 23, 2015 14:05
Sample code for a choose-your-own-adventure event.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Choose your next video!</h1>
<div>
<a href="http://play.vidyard.com/EXAMPLE.html">
The first video
</a>
@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 / timed_fullscreen_event.html
Last active February 5, 2016 20:41
With the new Vidyard Events functionality, we're starting to see some fun, new use cases. In this example, we display a full screen event for a few seconds, then automatically dismiss it and resume video playback.
<!-- Include this below all other code in your event -->
<script type='text/javascript'>
window.addEventListener("message", function(event) {
var ctaId = window.frameElement.id.split('_')[1];
var playerId = window.frameElement.src.split('/');
playerId = playerId[playerId.length-3];
// only allow from domains that end in allowedDomains
if (!event.origin.match(/vidyard\.(dev|com)$/)) { return; }
if (typeof event.data !== 'string') { return; }
try {
@jramsahai
jramsahai / load_player_from_form.html
Created May 31, 2016 15:10
Here is some code that will allow you to request a Vidyard UUID which can then dynamically load the corresponding player.
<html>
<head>
<!-- please note that the following code is not designed in a responsive manner
and will need to be adjusted to accomodate if desired -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
//define function to get the embed code based on the uuid
function getEmbedCode(uuid) {
var script=document.createElement('script');
script.type='text/javascript';
@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 / 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 / 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 / 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);