ritz078 / embed-js Goto Github PK
View Code? Open in Web Editor NEW🌻 A lightweight plugin to embed emojis, media, maps, tweets, code and more. ✨
Home Page: https://codesandbox.io/s/Wp5OlNMn
License: MIT License
🌻 A lightweight plugin to embed emojis, media, maps, tweets, code and more. ✨
Home Page: https://codesandbox.io/s/Wp5OlNMn
License: MIT License
Future request for Ustream video embed
cant download the zip file :(
Any plans to add Instagram support? I see there is Instagram mentioned in the code but not in the official support
Multiples images are not displayed in Embed and EmbedBlock.
Hi Ritesh,
Awesome work on this plugin, it seems very promising. I was wondering if you could add an example or some directions on how to initialise embed.js on a input form. Think of a Status Update ala Facebook or any form that takes direct input.
In an ideal situation embed.js would be attached to a input form and would show a live preview as the user types/pastes media/links/videos.
Thanks in advance for your help :-)
Request Flickr embed support.
Hey there,
first of all, embed.js is awesome und super easy to use. Thanks for that.
I have come across one issue though. Whenever I have multiple YouTube video embeds, and I click one to view the video, all the others stop working. What I mean is that you can't click another video to view right in the browser.
Is this supposed to be like this? Is there any way around this, or is this a bug?
You can see what I mean in this example:
http://codepen.io/ritz078/pen/JYmJML
Click the first video, and then click the second video. In my case at least, the second video won't play.
Thanks for your effort.
Kind regards
Do you know what this is with the FlickR images and EMBEDjs?
http://www.flickr.com/photos/98263296@N03/11691666724/
http://www.flickr.com/photos/98263296@N03/11691666724/
, no Flickr http://www.flickr.com/photos/98263296@N03/11733196833/
http://www.flickr.com/photos/98263296@N03/11733196833/
, no Flickr
using pdf.js . Any other suggestions are most welcome.
Hello,
I've been trying to get your plugin to work, but every time I attempt to render I get this error message;
Uncaught (in promise) ReferenceError: hljs is not defined(…) embed.min.js:10
I've installed via npm and loading the minified version from /dist
I've also tried a CDN and I tried to load from /src but the same error keeps coming back.
When i post a link of LiveLeak.com it's displaying 2 videos (same), i tested multiple vid links.
http://www.liveleak.com/view?i=42a_1426999994
i am using your latest JS
Getting error in console on spotify.,... i don't understand :(
Blocked cross- Origin application : the Same Origin Policy is reading the external source https://jxnvqvdyms.spotilocal.com:4374/service/version.json?service=remote&ref=http%3A%2F%2F........................%2Fforum%2Fmessages%2F11100&cors= not increase. (Reason: CORS request failed ) .
Zie video support:
embed url:
http://media.zie.nl/e/?v=z4pz0fufepzd
Function to choose MAP of streetview or combination of both in a box
It would be nice to if i could hide/mask the original location/link and show only the new output
If there are images smaller than the element width they are stretched. This is not nice. My pictures are blown up.
Output / include boxes like Jsfiddle. Here are 8 fiddles for developpers.
http://phpassist.com/
Please, don't do it, just never. This causes terrible issues when having to deal with 3rd party "authority" JS libraries which are not beyond our control (tons of libraries that iterate an array in the bad way for (item in array)
).
I will make a PR soon.
It would be nice if the video width can be px or % and the height can be auto-calculated.
I want to enable/disable the Embed.js function on a div (by clicking a button) for use in a box to show source or preview output.
Is there a way to unload/disable the function ?
The DOWNLOAD button in PDF box does not work
lines 526 and 537 are about PDF.
//calling the function before pdf is shown
//calling the function after the pdf is shown.
Requestion for a function to add an Lightbox function to images. (Click on image to view an large version)
Hi, thnx for this nice plugin.
Can you add an option for an action after hitting the button to play/listen or view a mediafile?
Hi, I see that all emojis are in one file and I can't find the way to use the noto-emojis ( https://github.com/googlei18n/noto-emoji ).
Thanks for this great work and for all !
When i enable the link option, the parameter
linkTarget : '_blank',
does not work
When i use multiple videos , only one is displayed in a box for playing,
Function request: Instagram support
example: https://github.com/pongstr/pongstagr.am/blob/master/src/js/pongstagram.js
Can you build in video support for the following:
Twitch.TV
LiveLeak
Dotsub
Dailymotion
Vine
TED
Option to show .xls or .xlsx files to view. (Like PDF option)
When posting a list of items the output is not in same order. It would be nice(r) and logical if embed shows are in same direction/list.
https://www.cca.edu/sites/default/files/pdf/08/word-to-pdf.pdf
https://twitter.com/MarjoleinPloegm/status/586461330980343808
https://www.youtube.com/watch?v=QHulaj5ZxbI
http://jsbin.com/iwovaj/73
Hello Ritesh,
I'm at the process of making a custom template for the different video embeds for my application.
While changing the template it self turned out to be pretty easy (example below with youtube):
ejs.template.detailsYoutube = function(data, fullData, embedUrl){
return '<div>' + embedUrl + '</div>'; // this template only shows the embed link as an example
}
Now I am struggling to get the right functionality with clicking the video thumbnail and letting it play.
The code responsible for this should be these two parts:
(embed.js around line 300)
play: function play(className, options) {
var _this = this;
var classes = document.getElementsByClassName(className);
var _loop = function _loop(i) {
classes[i].onclick = function () {
options.onVideoShow();
var url = classes[i].getAttribute('data-ejs-url') + "?autoplay=true";
classes[i].parentNode.parentNode.innerHTML = _this.template(url, options);
};
};
for (var i = 0; i < classes.length; i++) {
_loop(i);
}
},
And at line 3304 the function is called. But in order for it to work I would have to use the 'ejs-video-thumb' class:
helper.play('ejs-video-thumb', this.options);
So here are my questions:
Once again, thank you for your effort.
Kind regards,
Enes Emini
Hi Ritesh,
I would like to suggest you the modifications below :
jquery.embed.css
.emoticon {
background : transparent url(../resources/images/emojis.png) 0 0 no-repeat;
}
before @media all and (-webkit-min-device-pixel-ratio : 1), .....
for browsers not support media queries
jquery.embed.js :
icons.forEach(function (icon) {
for (var i = 0; i < a.length; i++) {
if (a[i] === icon.text) {
a[i] = '<span class="icon-emoticon" title="' + icon.text + '">' + '&#x' + icon.code + '</span>';
}
}
});
by
jQuery.each(icons, function(index, icon) {
for (var i = 0; i < a.length; i++) {
if (a[i] === icon.text) {
a[i] = '<span class="icon-emoticon" title="' + icon.text + '">' + '&#x' + icon.code + ';</span>';
}
}
});
2 reasons : for browser not support forEach and the missing ';' after icon.code
var lat = d.results[0].geometry.location.lat;
var long = d.results[0].geometry.location.lng;
if (opts.mapOptions.mode === 'streetview') {
template = '<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/streetview?key=' + opts.gdevAuthKey + '&location=' + lat + ',' + long + '&heading=210&pitch=10&fov=35"></iframe>';
}
else {
template = '<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?key=' + opts.gdevAuthKey + '¢er=' + lat + ',' + long + '&zoom=18&maptype=satellite"></iframe>';
}
by
var latitude = d.results[0].geometry.location.lat;
var longitude = d.results[0].geometry.location.lng;
if (opts.mapOptions.mode === 'streetview') {
template = '<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/streetview?key=' + opts.gdevAuthKey + '&location=' + latitude + ',' + longitude + '&heading=210&pitch=10&fov=35"></iframe>';
} else {
template = '<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/view?key=' + opts.gdevAuthKey + '¢er=' + latitude + ',' + longitude + '&zoom=18&maptype=satellite"></iframe>';
}
long is a reserved word
JF
When i include the css file, the following give conflicts in my website becouse the parameter does run on al tags.
I changed it to the name of the div container where EmbedJS is running on.
Is it an suggestion that you change it in one of your next releases so its on the div container?
Maybey more people can have problems with this...
In the previous versios there where some other options, in the latest they are gone..
Did i miss something?
codepenEmbed :true,
codepenHeight :300,
jsfiddleEmbed :true,
jsfiddleHeight :300,
jsbinEmbed :true,
jsbinHeight :300,
ideoneEmbed :true,
ideoneHeight :300,
plunkerEmbed :true,
plunkerHeight :300,
twitchtvEmbed :true,
dotsubEmbed :true,
dailymotionEmbed :true,
vineEmbed : true,
tedEmbed :true,
liveleakEmbed :true,
Maybey the options list can be styled like this example:
Future suggestion for short websitelinks using:
goo.gl
bitly
tinyurl
ow.ly
Hi, could you please show how create the Google keys? I only can get it working using the ones included in the demo. With mines I only get a forbidden message.
Thanks in advance :)
When setting imageEmbed to false, the image is not showing at is original notation.
I use a IMG tag in my resources. Maybey you can make a option to convert the img tag or only urls and enable/disable the function complete.
Can you add an option field for actions after twitter shows up?
Is it also posible to ad this option before & after the embedJS has started? (before apply/ after apply)
onTwitterShow:function(){
$('.column').matchHeight();
},
onEmbedJSLoad:function(){
$('.column').matchHeight();
},
onEmbedJSLoaded:function(){
$('.column').matchHeight();
},
@media only screen and (min-width: 480px) and (max-width: 767px) {
.ejs-doc-icon {
border-right: 0px solid #eee;
height: 110px;
width: 200px;
}
.ejs-doc-icon i {
margin: 15px 148px;
}
.ejs-doc-view{
height: 65px;
width: 366px;
text-align: center;
}
.ejs-doc-view button {
float: none;
margin: 10px 10px 0;
padding: 6px 15px;
}
.ejs-doc-viewer {
height:320px;
}
.ejs-doc-title {
display: none;
}
.ejs-doc-detail {
padding-left: 0px;
width: 180px;
}
.ejs-doc {
margin: 20px 0;
overflow: auto;
}
.ejs-video-detail {
display: none;
}
.ejs-video-title {
display;none;
}
.ejs-video-desc {
display: none;
}
.ejs-stats {
display: none;
}
.ejs-video-stats span {
display: none;
}
.ejs-video-stats span i {
display: none;
}
.ejs-video-preview img {
height: 224px;
width: 348px;
}
.ejs-video-thumb {
float: none;
width: 348px;
}
.ejs-video-thumb i {
margin-left: 160px;
margin-top: -128px;
}
}
@media only screen and (max-width: 479px) {
.ejs-doc-icon {
border-right: 0px solid #eee;
height: 110px;
width: 228px;
}
.ejs-doc-icon i {
margin: 15px 78px;
}
.ejs-doc-view{
height: 100px;
width: 228px;
text-align: center;
}
.ejs-doc-view button {
float: none;
margin: 10px 10px 0;
padding: 6px 15px;
}
.ejs-doc-viewer {
height:320px;
}
.ejs-doc-title {
display: none;
}
.ejs-doc-detail {
padding-left: 0px;
width: 180px;
}
.ejs-doc {
margin: 20px 0;
overflow: auto;
/*
overflow-y:hidden;
overflow-x:hidden;
*/
}
.ejs-video-detail {
display: none;
}
.ejs-video-title {
display;none;
}
.ejs-video-desc {
display: none;
}
.ejs-stats {
display: none;
}
.ejs-video-stats span {
display: none;
}
.ejs-video-stats span i {
display: none;
}
.ejs-video-player {
width: 208px;
overflow:auto;
}
.ejs-video-player iframe {
width: 208px;
}
.ejs-video-preview img {
height: 138px;
width: 208px;
}
.ejs-video-thumb {
float: none;
width: 208px;
}
}
am having this message when im attempting to install with bower:
bower embed-js#*
EMALFORMED Failed to read /var/folders/xh/mzwpjt1d3bgg6wmsvkwsq9f40000gn/T/user/bower/264d16b7d819bc21408de67ee21d81bb-15037-5F7sQ7/bower.json
Additional error details:
Unexpected token ]
Any ideas?
Option for labeling the buttons in Embed.js (example : view/download button for PDF)
or option to include a special embed_language_en.js file or something.
english can be default language if nothing is included
Sincere thanks for making this plugin. Its awesome.
Are you planning on including following plugins?
I want to embed some code highlighting on a style guide I'm building.
I've got these in my head:
<link rel="stylesheet" type="text/css" href="https://rawgit.com/ritz078/embed.js/es6/dist/embed.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css" />
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" />
and this after my body:
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.5/highlight.min.js"></script>
<script src="https://rawgit.com/ritz078/embed.js/master/dist/embed.min.js"></script>
<script type="text/javascript">
ejs.setOptions({
highlightCode: true
});
ejs.applyEmbedJS('.u-ui-pre');
</script>
But I'm not getting the highlighting rendering.
Am I using it wrong? This should be in the examples section I feel.
In embedblock images are not displayed when posting more than 1 of the same link.
https://github.com/ritz078/embed.js#advanced-options
missing flickr switch in excludeEmbed comment
https://github.com/ritz078/embed.js#loading-plugin-in-a-block
add an example for use it e.g. with onlick on button
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.