jramsahai’s gists

jramsahai / launch_lightbox_from_hyperlink.html

Last active December 25, 2015 07:29

I was asked to provide the code to launch the lightbox from a hyperlink. There was some interesting conversation on http://stackoverflow.com/questions/688196/how-to-use-a-link-to-call-javascript so I went with this.

	<html>
	<head>
	<script type="text/javascript" id="vidyard_embed_code_XXXXXXXXXXX" src="//play.vidyard.com/XXXXXXXXXXX.js?v=3.1&type=lightbox"></script>
	<script type="text/javascript">
	window.onload = function() {
	var a = document.getElementById("videoLink");
	a.onclick = function() {
	fn_vidyard_XXXXXXXXXXX();
	/* Where XXXXXXXXXXX is the UUID of the player. If the UUID contains a '-'
	(e.g. XXXXXX-XXXXX) replace it with a '$' in the function call

jramsahai / optionally_launch_lightbox_from_query_string.html

Last active May 25, 2016 23:04

It's incredible how creatively the Vidyard player gets used by our customers. All of the building blocks are there to do really neat things, it's just a matter of picking apart the code we provide. One such request was to allow someone to embed a link in an email message that would direct the mark to a landing page and launch the lightbox player…

	<!--
	www.mycompany.com - Normal website appears
	www.mycompany.com?playvideo=1 - Website appears, Vidyard player launched in lightbox
	-->
	<html>
	<head>
	</head>
	<body>
	<script type="text/javascript">
	// Parsing the query string

jramsahai / embedded_form_in_CTA.html

Last active December 26, 2015 03:59

When embedding forms into a pop-out or final call to action (CTA), we have a couple options. Sure, it's easy to dump the form code into the source editor when you create the CTA, but consider the situation where you have the same form used in multiple players. The amount of work needed to make changes to the form could be trouble. Instead, what …

	<html>
	<head>
	</head>
	<body>
	<!-- By default, the pop-out CTA is 300px wide. You might want to set the div width and height to allow for a border -->
	<div style="width:260px; height:250px;">
	<!-- Sample HTML form. Can be replaced with a form from your favourite MAP (e.g. Hubspot, Silver Pop, etc.) -->
	<form>
	<table>
	<tr>

jramsahai / salesforce_template.html

Last active December 30, 2015 06:19

With the Vidyard for Salesforce integration, you can send individual emails to leads and contacts. You can also create an email template using the vyemail query string allowing you to use an email template and get individual tracking data fed right back into Salesforce and the Vidyard Analytics Center. Here is a sample email template we whipped …

	Hi {!Contact.FirstName},<br /><br />

	Thank you for your interest in Vidyard for Salesforce! We know you're excited to learn more.
	Here's a video of Karl describing how Vidyard and Salesforce work together to bring viewer analytics into Salesforce CRM.
	<br /><br />

	Looking forward to hearing your feedback!<br /><br />

	<div>
	<a href="http://demos.vidyard.com/watch/2reLCXJVqQodqQYiAeHPgQ?vyemail={!Contact.Email}" target="_blank">

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 / dynamically_resize_player_using_css.html

Last active January 14, 2019 16:20

If you're looking for a way to dynamically resize the Vidyard inline JavaScript player, you'll find an example of one way to do it below.

	<!--
	Refer to this article for more information:
	http://knowledge.vidyard.com/Core_Features/Publish_your_players/011_Publish_your_player/014_Dynamically_resize_the_inline_player
	-->
	<html>
	<head>
	<style type="text/css">
	.innerContainer {
	position: relative;
	display: block;

jramsahai / delay_player_load.html

Last active January 1, 2016 18:19

On occasion, we've seen instances where the Vidyard player loads before the tracking code on a MAP tagged page. Here's a solution to delay the loading of the player until after the document is loaded. This ensures that the tracking code is loaded first, allowing the player to find the cookie info.

	<html>
	<head></head>
	<body>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script type='text/javascript'>
	window.onload=function() {
	$("#video_container").html('<script type="text/javascript" id="vidyard_embed_code_oTDMPlUv--51Th455G5u7Q" src="//play.vidyard.com/oTDMPlUv--51Th455G5u7Q.js?v=3.1&type=inline"><\/script>');
	};
	</script>
	<div id='video_container'>

jramsahai / play_link.html

Last active August 29, 2015 14:01

Sometimes you might want to create a play button for the Vidyard player outside of the player itself. Here's one way to do it using a hyperlink with the player API.

	<html>
	<head>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
	<script src="//play.vidyard.com/v0/api.js"></script>
	</head>
	<body>
	<a href="" id="playvideo">Play video</a><br /><br />
	<script type="text/javascript" id="vidyard_embed_code_VTYj3v6rf7JsXhwYhJRZ4A" src="//play.vidyard.com/VTYj3v6rf7JsXhwYhJRZ4A.js?v=3.1&type=inline"></script>
	<script type="text/javascript">

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 />

jramsahai / pause_between_chapters.html

Created June 26, 2014 18:44

Pausing the player after each chapter allows you to take some kind of alternate action with the viewer in the middle of the player. Use the opportunity to hit them with a CTA of some kind (additional info, form, etc.) then start them right back on the video from where they left off. I used the player API and a new play event.

	<html>
	<head>
	<script src="//play.vidyard.com/v0/api.js"></script>
	</head>
	<body>
	<script type="text/javascript" id="vidyard_embed_code_hsEU_eBjTeQ1Wk1NxIF99w" src="//play.vidyard.com/hsEU_eBjTeQ1Wk1NxIF99w.js?v=3.1&type=inline"></script>
	<script type="text/javascript">
	var video = new Vidyard.player("hsEU_eBjTeQ1Wk1NxIF99w");
	var paused = 0;
	video.on("play", function() {

Ji Ramsahai jramsahai