mike-zarandona / prettyembed.js Goto Github PK

Instead of just inserting the iframe with autoplay set to true it would be better if you used the actual iframe API to insert videos. https://developers.google.com/youtube/iframe_api_reference

This would allows manipulation of a video once its been loaded like adding a stop function that could be programmatically called just off the top of my head.

Every time prettyEmbedis called, the following is executed:

        var div = $('<style />', { 
            id:     'pretty-embed-style',
            html:   '.elem.selector{' +
                        'position: relative;' +
                        'background-color: #000;' +
                        'cursor: pointer;' +
                    '}' + [...]
        }).appendTo('head');

This creates mutliple style tags in the head section of the document, all with the same id.

I'd suggest to either store in a boolean whether the styles have already been appended to the head, or to include a separate css file in the project.

Hi,

This is a great script, but I'd like to ask, what license does it fall under?

Thanks!

is there a possibility to open the video in a lightbox like fancybox?

So far the library generates image urls that pull the maximum resolution of the image. It would be nice to have an option to chose which image size to pull. For smaller previews the maximum resolution preview might be unnecessary.

would be nice! :)

Any plans for supporting Vimeo?

The obj.attr('data-pe-show-related') returns a string so the if statement always fails if
you are using attributes for driving your prettyembed.
Below is a suggested fix to move the attr to be evaluated against string vs boolean for the attribute string creation.

if ( (obj.attr('data-pe-show-related') === 'false') || (options.showRelated === false) ) { playerOptions += '&rel=0'; } else { playerOptions += '&rel=1'; }

The video won't start on my Android Phone when clicking the play icon.

Phone: Samsung Galaxy
Android version: 4.1.2

Browser is the default browser on Android.

Hi!

Great plug-in, by the way. It's exactly what I need, except a few things.

When I play the video, it shows vertical bars on both sides of the video, and neither autoplay nor loop=1 does not seem to work. When the page loads, the video doesn't play automatically and it doesn't loop either.

  $(function(){
    $('#bgvid').prettyEmbed({
      videoID: 'some_youtube_id',
      previewSize: 'hd',

      // Embed controls
      showInfo: false,
      showControls: false,
      loop: true,

      colorScheme: 'dark',
      showRelated: false,

      useFitVids: true
    });
  });

Any help would be much appreciated.

Thank you!

I'm getting the default YouTube mobile player on mobile devices (useragent set to iPhone 3). No thumbnail - immediately showing the player. Is this the correct behavior? On desktop it works perfectly.

Hi!
Getting Started -> Script Driven -> Call the plugin...
On the last line should be "});" instead of ")};"

:)

For an infinite scroll page I have to call prettyEmbed successively.

In line 59 of the non-minified version there is elem = $(this).add('.pretty-embed');. Lateron the class name pretty-embedis added to the current element. Which, with successive calls, leads to all formerly handled elements to be handled again. I ommitted .add('.pretty-embed') in line 59.

Also, for reasons I don't quite understand, the value for thisCustomPreviewImage changes from undefinedto an empty string from the second time on that the script is executed. Which let's the script run into the first branch of the if statement in line 138, causing an img element with an empty src attribute to appear.

I changed line 138 to
if ( thisCustomPreviewImage !== undefined && thisCustomPreviewImage !== '') {
as I am missing the reason for the value not staying undefined.

Otherwise, version 1.1.0 is a great improvement and works like a charm. Thanks for the effort!

What is pretty about black sidebars? ;-)

it work with embed playlist too??
like
iframe width="560" height="315" src="//www.youtube.com/embed/videoseries?list=PLA1BD1E862C80F959" frameborder="0" allowfullscreen></iframe

hi, can this change the subtitle options and the translated options ? thanks
example:
subtitle: true
translated: spanish

As you can see in the screenshot attached, during playback, the bar at the bottom disappears unless your mouse is over it in a regular embed. Thought it was worth noting.

Is there any IE8 Support planned?
Thanks

No maxresdefault.jpg available for low res videos, e.g. http://img.youtube.com/vi/yCCnqP0c2UI/maxresdefault.jpg

It would be nice (better?) if the script pulled the YouTube ID from an element, rather than it having to be defined in the script itself. For example, a link; <a href="https://www.youtube.com/watch?v=ZDdq9UhTD_k">YouTube</a> would be replaced with the container / image / iframe.

Unless I'm reading it wrong...

When I add a second video, the thumbnail collection works for both, but if you play both videos, they both assume the video id of whichever video I specified last.

http://codepen.io/sethbrasile/pen/rqofd

PrettyEmbed.js uses elem = $(this) and later elem.selector to print out the css rules. As the selector property is deprecated, the css rules are generated without a selector.

Firefox for example automatically seems to seems to use a * selector in that case. The result is play buttons appearing on every element on the page.

I guess it would be a solution to just have the selector as an option.

When emulating mobile in Chrome or loading prettyembed on iPhone or Android, the cover image is hidden.

Edit: Autoplay doesn't work on all mobile devices, therefor the if(mobile) that is in place with pretty embed may be needed.