Code

Discussion on HTML5 Video & Youtube background

Discussion on HTML5 Video & Youtube background

By
Cart 1,506 sales

Tean supports this item

Supported

This author's response time can be up to 2 business days.

303 comments found.

Hi Tean, In HTML5 Video & Youtube background how I can use fullscreen video in index_singleLocal.html on mobile devide

Hello!

This demo example contains fullscreen button. What is that you are trying to achieve?

I am very confused, I just want to add my youtube video and i have no idea where to put the link. the page i want to use is the single youtube page and when i open this page keep asking for (Youtube API key missing! Please set API key in player settings.) where is player settings? i got the api key, do i need to use it? where? please, i need help. cheers

replace ytAppId using my key?

Input youtube api key there as value:

ytAppId:'api_key_here',

Thanks so much! All working like a charm! I am impressed, the support was brilliant!!!

hey, is there a way to have the forward, backward, and pause buttons hide until the screen is clicked?

I am not sure I understand what you mean. Where is the setting?

I would like those controls to disappear after, say 5 seconds, of the video playing. Then reappear if the user clicks anywhere on the video screen

There is no setting, I was referring to the fact you can modify the code for such feature.

Hi,

I try to have informations of playing media, in the callback function apvbPlaylistItemDisabled

function apvbPlaylistItemDisabled(instance, mediaId, target, counter){ ... }

I want to have thumbnail url, and title of the media. How can i have that?

thanks!

This is a global var which you can make available inside this function with little code modification.

Ok thank you! I try to declare playlistData[] outside jquery function (in a global scope) and it work.

Do you think the better way is to do like that? or to change the params of the apvbPlaylistItemDisabled function like: apvbPlaylistItemDisabled(instance, mediaId, target, counter, playlist){..}

—> I add ‘playlist’ param and i can call the function like: apvbPlaylistItemDisabled(_self, mediaId, _item, id, playlistData)

Which solution is better? I want to change the minimum of the code to be able to use the next updates of your code.

thank you

Its better to pass this via function.

Where can I find the settings to change the ytAppid ? What folder is it in

I found it. Its within the script. -

The script stop work on the project page. I redownload package and tried to run demo in _deploy folder. The demo does not work, showing the error: Youtube API key missing! Please set API key in player settings. Please, advise.

I created a new project and activated YouTube Data API v3 . Now I have an option to get server key, browser key, iOS key or Android key… Which one I need? It also required domain name, but I use IP address or file:///.

You need a browser key inserted in settings: ytAppId

Hello, i have a problem whith 3 videos in mp4. the file is betwen 2500 mo and 7000 mo but the player don’t lauch it. Is there a limit for videos ? Thanks

ok thank you, but how do you put long videos in hd? its not possible ? Just possible to cut the videos ?

You can test how your videos play in html video tag: http://www.w3schools.com/html/html5_video.asp

You could check youtube what is their preferred size for videos:

http://www.guildwars2guru.com/topic/16914-whats-the-approx-mb-per-minute-size-of-youtube-videos/

hi, thx for all reply i see and test it but is difficult with all browser: in firefox whith W3c test, the video big capacities don’t lauch but other browser yes… i dont hnow whit where exemple is the best for me i tested all but i dont have what i need. i have frame and need a player to have in but whit control on default (full screen, navigate movie..) i have some problem whith the default browser of android, not possible to full screen. I make other test Thanks

Hello! I’ve implemented the plugin on a site, and either we didn’t test it on Safari when launched or it stopped working.

So, the problem is that it’s throwing a frame origin issue , and the page remains blank (as we have a loader js animation an it gets broken with this error)

This is the URL: http://bit.ly/1PM7eE0

Thanks!

Hello! In this one: http://pasteboard.co/Oa6ZeSB.jpg The video is working, but there’s that error on the console.

Youtube is embedded like this:

https://www.youtube.com/

This got rid the similar error in chrome, but it appears error in safari still persist. It is also a common issue: https://github.com/okfocus/okvideo/issues/25

https://www.google.hr/webhp?hl=en#hl=en-HR&q=blocked+a+frame+with+origin+youtube

Hi Tean,

I want to play Youtube playlists. How can ye have name of the youtube media in the address bar ? Deeplinks show only a number of media.

Is it possible?

Hmm Ok! I try to identify the numbers to convert my media in name and show it in the url. I play in random mode, the numbers change all the time. i think it would be great that the order of play change but not the number of media. What do you think ?

Again this is not possible, numbers represent which media needs to play.

i meant “the media number”

Hi, i have a simple question. How can i do to pause the video in a certain time after it’s been playing? I tried to do it by using the .pause(); function but it doesn’t work for me.

Thanks.

Hello!

You can use the included api. Example index_playlistBottom_buttons.html contains a quick api demo.

Hello,

The opacity is the same with all thumbnails, is it normal? I see in the code “opacity:0” for thumb_img in the create thumb section ( file jquery.apvb.js) But when i put my mouse pointer over a thumbnail, the opacity does’nt change.

thank you thomas

Hello!

Yes, its normal behavior, the same as can be seen in live demo: http://codecanyon.net/item/html5-video-youtube-background/full_screen_preview/1555660

yes i see it! ;) so to have it the code has to be modified?

I see in the code theses lines: if(_item.thumb){ thumb=$(new Image()).addClass(‘thumb_img’).appendTo(div).attr(‘alt’, _item.title?_item.title:’‘).css({ cursor:’pointer’, opacity:0 }).load(function() { //console.log($(this)) $(this).stop().animate({ ‘opacity’:1}, {duration: 500});//fade in thumb }).error(function(e) { //console.log(“thumb error ” + e); }).attr(‘src’, _item.thumb); }

is it here?

You have to give div in which thumbnails are placed mouse over / out events in which you can add an animation.

Hi people ,

Can i make you a question ?

I have a html 5 video, can i put in this template , and when the video finish , i can navigate to my url ? Do i have this option ?

Thanks a lot

Hello!

Yes, this option is included.

Hello, thanks for your quickly answer , one question more , can i put this ” intro ” in my website ? i have to create a html page ?

Intro button is plugin element which you copy together with plugin html into your page.

hi Tean, I just wan to know if this script will work for background videos?

Hello!

Yes, you can place video at any layer, foreground or background.

Hi,

i just download the lastest version of appliation (20140412). I use youtube playlist template.

Or this new version doesn’t play VEVO videos (it switch directly to the next) and some others (ie. https://www.youtube.com/watch?v=debIyWS6Byc&index=6&list=PLbzvJGBK_v5FNDsjrpPEJlk2t7CVHDmwZ , i don’t know why).

it worked well before with the old version of code.

Any explanation?

thanks

Hello!

I have just tested your playlist link and it plays correctly: http://www.interactivepixel.net/cc/jquery/apvb/test.html

Hmm ok, are you sure your test use your new code? It’s strange

Ok, very sorry, when i put the files online, it works.

Thank you

Just got notification of new version of this product
But dont know what new features. Last log update is dated: 25.6.2014

Hello!

Item description needs to be edited after file update has happened.

Hi. Could you please tell me how i can make video mp4 renamed in jpg to play in Html5 video? Thanks

Hello!

Images cannot be used in this plugin, only videos.

Hi I know that. My question was not to add images, but to rename videos from .mp4 to .jpg and play in the html5 video. Which code needs to be adjusted? Thanks

This is not possible.

I’m using this script to offer other people to embed my video to their websites. I was incode video into mp4 and webm containers. Since November 2014 Firefox can play h.264 so there is no need in webm/ogg versions anymore. Are you planing to update this script according to this?

It is not my page, I was pointing to the mp4 video in that page, it doesnt play on opera on my side.

You are using very old version of Opera then. Well, I deleted the part with webm/ogg in jquery.videoGallery.js and seems like there is no more errors.

I am using the newest version on windows.

Will videos play within any div or is it restricted to body

http://bluelilyclients.com/cc_/backVideo/_deploy/1.html
I’m trying to move video behind div with image

I just added a div below componentWrapper and used this css on it:

.test{
    position:absolute;
    top:0px;
    left:0px;
    width:100px;
    height:100px;
    background:red;
}

Oh no, the solution was simply to place the div after everything else. Honestly I’ve spent hours playing with this and hadn’t thought of that.
Thanks so much

Hi !!

How to put an autoplay on iPhone and iPad please?

Regards, Jordan

So there are no solution?

No, unfortunately you cannot overwrite that.

Dear Sir, How can I change the CSS, when I enter the “singleYoutube.html” to see FULL SCREEN without click the mouse. Automatically, At the beginning, I want to see it with FULL SCREEN without clicking the mouse. Plsease help me.

Very respectfully yours,

HERBASD

Hello!

This is not possible automatically without user input:

http://stackoverflow.com/questions/11567993/is-possible-automatic-fullscreen-with-html5

THANK YOU FOR GOOD INFORMATION !

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey