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.

❯ bs pretty
Search results:

    prettycheckable git://github.com/arthurgouveia/prettyCheckable.git
    jquery-prettyPhoto git://github.com/scaron/prettyphoto.git
    ng-prettyjson git://github.com/darul75/ng-prettyjson.git
    better-prettydate git://github.com/chemerisuk/better-prettydate
    prettyprint git://github.com/padolsey/prettyPrint.js
    jquery-prettydate git://github.com/jzaefferer/jquery-prettydate
    angular-pretty-checkable git://github.com/itslenny/angular-pretty-checkable.git
    pretty-bytes git://github.com/sindresorhus/pretty-bytes.git
    pretty-ms git://github.com/sindresorhus/pretty-ms.git
    prettyPrint git://github.com/padolsey/prettyPrint.js.git
    pretty-exponential git://github.com/bmcustodio/pretty-exponential.git
    jquery-prettyselect git://github.com/kajyr/jquery-prettyselect.git
    prettydiff git://github.com/austincheney/Pretty-Diff.git
    grunt-html-prettyprinter git://github.com/twolfson/grunt-html-prettyprinter.git
    pretty-scss git://github.com/rthor/Pretty-SCSS.git
    pretty-slider git://github.com/usmakestwo/pretty-slider-bower.git

my_blog git/master
❯ bs prettyembed
No results.

my_blog git/master
❯ bs pretty-embed
No results.

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.

Adds allowMobilePreview so that a user can force the previewImage to display on mobile. Though autoplay does not work on most iPhone/Android devices, it is still useful to be able to cover the video with the image of choice on mobile.

With this in place it may be considerable to add a customPreviewImageMobile array option for providing mobile images for various screen sizes for quicker image loading.

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.

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.

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.

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

No extra stuff here - just the bower.json file. If you merge this, I'll register your script to bower on your behalf under "pretty-embed". And the people, the automate-every-damn-thing people, they will love you forever.

Note: I see that you used to have a bower manifest, and subsequently deleted it. I'm guessing that's because your script wasn't showing up on bower. If that's the case, it was because that file flagged your repo as private, which effectively disallows publishing.

Added:

$(this).attr('id', thisVideoID);

Just after:

if ( $(this).attr('data-pe-videoid') !== undefined ) { thisVideoID = $(this).attr('data-pe-videoid'); }
        else if ( $(this).attr('href') !== undefined ) { thisVideoID = youtube_parser( $(this).attr('href') ); }
        else { thisVideoID = options.videoID; }

Changed:

$(this)

To:

$(e.target)

In:

 $('body').on('click', '.pretty-embed', function(e) {
        e.preventDefault();

        clickEventRunner( $(this) );
    });

Because it seemed like this was working in the wrong context.

Changed:

else if ( options.videoID !== undefined ) { thisVideoID = options.videoID; }

To:

else if ( obj.attr('id') !== undefined ) { thisVideoID = obj.attr('id'); }

In:

if ( obj.attr('data-pe-videoid') !== undefined ) { thisVideoID = obj.attr('data-pe-videoid'); }
        else if ( options.videoID !== undefined ) { thisVideoID = options.videoID; }
        else {
            thisVideoID = undefined;
            console.error('PrettyEmbed.js Error:  Misformed or missing video ID.');
        }

To set video id from 'id' attribute that was added earlier.

I did not check for other use cases (such as the "HTML5 Driven Application" example).

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.

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