Skip to content

Instantly share code, notes, and snippets.

@FrankM1
Forked from westonruter/alternative1.html
Created May 9, 2013 08:46
Show Gist options
  • Save FrankM1/5546347 to your computer and use it in GitHub Desktop.
Save FrankM1/5546347 to your computer and use it in GitHub Desktop.
<!--
try at http://jsfiddle.net/westonruter/LVpkf/
note use of autoplay=1 argument so that the video starts playing right away
no IDs are used so multiple instances can appear on the same page
note also that the iframe's width and height are automatically made the same as the original image
this is not ideal because we have potentially duplicate JS in each instance of the image/iframe
-->
<img
src="https://secure-b.vimeocdn.com/ts/283/797/283797216_640.jpg"
data-iframe="http://player.vimeo.com/video/41011190?autoplay=1"
onclick="
(function(img){
var iframe = document.createElement('iframe');
iframe.width = img.width;
iframe.height = img.height;
iframe.border = 0;
iframe.src = img.getAttribute('data-vimeo');
img.parentNode.replaceChild(iframe, img);
}(this))
"
>
<!--
try at http://jsfiddle.net/westonruter/e35Hb/
ensure that the JS in alternative2.js gets loaded into the page
this alternative allows the user to open the video in a new tab
it also shows when mouseover that the image links to a video via the hand cursor
the JS applies to any link that contains an image with a data-iframe attribute
-->
<a href="https://vimeo.com/41011190" target="_blank">
<img src="https://secure-b.vimeocdn.com/ts/283/797/283797216_640.jpg" data-iframe="http://player.vimeo.com/video/41011190?autoplay=1">
</a>
jQuery(function($){
$('a:has(img[data-iframe])').click(function (e) {
var img = $(this).find('img[data-iframe]');
var iframe = $('<iframe>', {
src: img.data('iframe'),
width: img.prop('width'),
height: img.prop('height'),
border: 0 // this is better to handle with CSS
});
$(this).replaceWith(iframe);
e.preventDefault(); // ensure the browser doesn't navigate to the link
});
});
<script>
iframePostName = '<iframe src="http://player.vimeo.com/video"></iframe>'
</script>
<div id="PostName"><img onclick="document.getElementById('PostName').innerHTML = iframePostName" src="http://sample.com/sample.jpg" alt="" /></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment