-
-
Save FrankM1/5546347 to your computer and use it in GitHub Desktop.
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
<!-- | |
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)) | |
" | |
> |
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
<!-- | |
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> |
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
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 | |
}); | |
}); |
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
<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