Ji Ramsahai jramsahai
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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 …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 …
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| 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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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…
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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() { |
OlderNewer