ritz078 / embed-js Goto Github PK

When i enable the link option, the parameter

linkTarget : '_blank',

does not work

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 ?

In embedblock images are not displayed when posting more than 1 of the same link.

http://jsfiddle.net/50a7kwp5/35/

Zie video support:

embed url:
http://media.zie.nl/e/?v=z4pz0fufepzd

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.

Request Flickr embed support.

using pdf.js . Any other suggestions are most welcome.

@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;
}
}

Multiples images are not displayed in Embed and EmbedBlock.

http://jsfiddle.net/50a7kwp5/30/

Option to show .xls or .xlsx files to view. (Like PDF option)

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 ) .

lines 526 and 537 are about PDF.

//calling the function before pdf is shown
//calling the function after the pdf is shown.

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

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 !

Output / include boxes like Jsfiddle. Here are 8 fiddles for developpers.
http://phpassist.com/

Function to choose MAP of streetview or combination of both in a box

Future request for Ustream video embed

Sincere thanks for making this plugin. Its awesome.
Are you planning on including following plugins?

1. Instagram
2. Slideshares
3. TED

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

Maybey the options list can be styled like this example:

https://github.com/glarios/fbPhotoStream#options

Any plans to add Instagram support? I see there is Instagram mentioned in the code but not in the official support

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 :)

It would be nice to if i could hide/mask the original location/link and show only the new output

• user info
• project info

cant download the zip file :(

Requestion for a function to add an Lightbox function to images. (Click on image to view an large version)

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

http://jsfiddle.net/50a7kwp5/26/

When i use multiple videos , only one is displayed in a box for playing,

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 :-)

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.

Can you build in video support for the following:

Twitch.TV
LiveLeak
Dotsub
Dailymotion
Vine
TED

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

When i include the css file, the following give conflicts in my website becouse the parameter does run on al tags.

• (asterix) (
  box-sizing : border-box;
  }

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

It would be nice if the video width can be px or % and the height can be auto-calculated.

If there are images smaller than the element width they are stretched. This is not nice. My pictures are blown up.

Future suggestion for short websitelinks using:

goo.gl
bitly
tinyurl
ow.ly

can you build in support for displaying twitter feed post?

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.

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:

1. How can I initialize the play function with another class name, without changing the source file?
2. And how can I customize the play function? Because in the default case, it goes up two levels, whereas in my case I need it to go up two more levels, before it can replace the content with the actual iframe.

Once again, thank you for your effort.

Kind regards,
Enes Emini

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();
          },

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 Ritesh,

I would like to suggest you the modifications below :
jquery.embed.css

1. Add

 .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 :

2. Replace :

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

3. Replace :

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 + '&center=' + 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 + '&center=' + latitude + ',' + longitude + '&zoom=18&maptype=satellite"></iframe>';
}

long is a reserved word

JF

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,

The DOWNLOAD button in PDF box does not work

Function request: Instagram support
example: https://github.com/pongstr/pongstagr.am/blob/master/src/js/pongstagram.js

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?

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

The display of PDF/Video is not nicely displayed on small devcies phones The PDF/Video becomes a box with sliders .

@media only screen and (min-width: 480px) and (max-width: 767px) { }
@media only screen and (max-width: 479px) { }

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

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.