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
Hello!
Settings are located in html page you use. Search for ytAppId.
If you are using index_singleYoutube.html page,
link to video is in data-path=”F08U2yCxbYg” attribute.
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?
Hello!
If you have autoplay off and you want to show controls after video starts, you can detect that and inside show controls.
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!
Hello!
You can access playlistData var which contains title info. Thumb is not stored, but you can store it in _buildPlaylist function.
Apparently playlistData is not known in the apvbPlaylistItemDisabled function. the return of console.log is “ReferenceError: playlistData is not defined”
do i have to add playlistData in parameter of the function?
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.
Hello!
File has been updated with new youtube api which requires api key to be created.
I’ve got an API key using this tutorial https://www.youtube.com/watch?v=JbWnRhHfTDA Where I need to enter it? I don’t see any info in documentation.
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:///.
Send a message here: http://codecanyon.net/user/Tean#contact
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
Hello!
If you are referring to file size, I think this is way too big file size for web video playing in the browser.
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!
Show me the which demo is causing this?
http://codecanyon.net/item/html5-video-youtube-background/full_screen_preview/1555660Hello! 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+youtubeHi 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?
Hello!
With deeplinking you can only have numbers, not media names.
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?
Hello!
I am aware that windows firefox only requires mp4 now, but mac firefox still doesnt. I dont know if there are plans for such update now.
Mat, It’s already there… Firefox already supports H.264 playback in Mac OS.
I havent checked for a while, its true for mac, so only opera now left without mp4 support.
Seams like It does already. Videos that can be played natively in your browser.
Not according to my testing: http://www.quirksmode.org/html5/tests/video.html
I did install Opera on my Macbook (Yosemite) and had no problem to play MP4 video.
MP4 video on the link doesnt work on windows.
Your link clearly state that Opera 11 does not support mp4. However, Opera 28 does support it. Current version of Opera is 29.
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
Hello!
You can place plugin in any html element.
I need advise
I’m trying to modify your sample file
index_singleYoutube.html
I can add a div over the top of the video if I place the div inside your div
componentWrapper
If I add a div outside “componentWrapper”, I can’t get it to the top regardless of my position or z-index.
Can you advise if how I can add a div on top of video without adding it within “componentWrapper”
Hello!
I havent tried, but according to your description, large enough z index on your div should work and its not youtube iframe issue since you said that div inside componentWrapper stays above video.
Thanks for response
I’ve tried using the +2147483647 (upper limit) but still floats behind the video
Have you set z index on componentWrapper ?
I applied -2147483647 to the class and also added it as an inline style but I doesn’t seem to move to the back
I tried now in firefox and chrome, didnt even add z index rule to anything and it works just fine.
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-html5THANK YOU FOR GOOD INFORMATION !