I got the video to work on my website, but the video doesn't play all of the way through. It keeps getting cut off and then restarting in an infinite loop
shookdesign () - 9 years ago - Reply -1
The script you linked to is no longer there "script src="http://pupunzi.com/mb.compo...""
Stan Williams () - 7 years ago - Reply 0
If your having troubling with the styling in chrome, change the section tag to a div.
Mike Hartwig () - 7 years ago - Reply 0
Put both your JS link where you paste
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
and the script tag <script src="http://pupunzi.com/mb.compo..."></script>
after your jquery script tag in your html body.
Lisa Darko () - 8 years ago - Reply 0
A bit of a shame the developer of bootsnipp.com invested so much time building such a great walled garden around his content. If the site simply had an 'export' button, I could actually use it.
Kevin Zeidler () - 8 years ago - Reply 0
Is there a way to load more than one video and randomize them each time you enter the site?
Rui Farinha () - 8 years ago - Reply 0
WHERE I PUT
<link href="http://fonts.googleapis.com..." rel="stylesheet" type="text/css">
<script src="http://pupunzi.com/mb.compo..."></script>
??
lucia () - 9 years ago - Reply 0
Is it possible to play a non-Youtube video or a video located on my server?
Régis André () - 9 years ago - Reply 0
Does not work with the following mp4 URL : http://i.istockimg.com/vide... Any idea ?
Régis André () - 9 years ago - Reply 0
This was working really well but now the sound is playing, I haven't changed a thing from when it was working before, anyway to mute the sound?
Amanda () - 9 years ago - Reply 0
For me the mute function doesn't work at all? Any help please? :)
Arno Agten () - 9 years ago - Reply 0
Did you find a way too get it to mute? I've got the same problem..
imichelle () - 9 years ago - Reply 0
cargar Imagen de fondo, después a parece el vÃdeo
Background image upload, then it seems the video
agregar class = banner
.banner{
background: url("../img/fondo.jpg") no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
color: #ffffff;
min-height: 496px;
}
<body>
<div class="banner">
<section class="content-section video-section">
<div class="pattern-overlay">
bg
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Full Width Video</h1>
<h3>Enjoy Adding Full Screen Videos to your Page Sections</h3>
</div>
</div>
</div>
</div>
</section>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
</body>
Jose Avelino Sanzana Villegas () - 9 years ago - Reply 0
The video doesn't auto play. You have to click the bg to make it start from Chrome.
ChemicalDeath () - 9 years ago - Reply 0
Hi, first of all, thanks for this snippet, it works fine on my side. However, I can't get my video to start at a specific
time. videoURL:' https://youtu.be/TzZC50ZBES... just fails and reload the original video. Any other way to get my video to start straight to specific time?
tbalkwill () - 9 years ago - Reply 0
Hi! I was wondering if there´s a way to improve the load speed at the beginning.
Developer_001 () - 9 years ago - Reply 0
hey fellas, what do i need to get the video in best quality, the example is set to quality:'large', is there a better one?
thanks
freefefes () - 9 years ago - Reply 0
i have bug ,, video not play, Cannot read property 'tagName' of undefined ?
Bentang Saepul Rohmat () - 9 years ago - Reply 0
Hey man the video is not showing up, I did everything that I'm supposed to. I even downloaded the file, and the video is still not showing only the grey bg. But yet in this website it works somehow. Can you please help me ?
Ivaylo () - 9 years ago - Reply 0
This snipp is not working people stop trying it and continue looking for things that actually work. I've tried literally everything and all it does is show the gray background. This example on the website must be something different.
Lamiata () - 9 years ago - Reply 0
try changing the youtube link to just be this...i just fixed mine..
{videoURL:'KeGV0SqCK2Q' --> its the end of your current youtube link.
instead of the whole youtube link.. also use the latest js
https://codeload.github.com...
also add this at the bottom of you page
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
CptSplendidPants () - 9 years ago - Reply 0
I think most ppl are have a jQuery Conflict.... Just make sure you call the js file AFTER jquery.... Then try to replace the init for this
<script>
(function ($) {
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
}(jQuery));
</script>
Omar () - 9 years ago - Reply 0
Is there a way to get the video to play automatically without the grey background in the beginning
AZZZZ () - 9 years ago - Reply 0
I took a full size image screenshot of the first video frame and made that the background, so it loads first and looks like the video. Sometimes when I'm hosting locally I still see the grey screen, but when I'm hosting it live I never do and it always works fine.
Lyall () - 9 years ago - Reply 0
Can it play audio too? And can it autoplay instead of touch to start?
JR Fent () - 9 years ago - Reply 0
I'm a beginner. Do I need to add the HTML, CSS, and JS for this to work?
Bhavik Patel () - 9 years ago - Reply 0
I was having trouble loading this 'as is' - what I had to do to make it work was first, make sure you pull in jquery somewhere in the head section, it rely's on it and will not work without it. Secondly you must load it on a server - it won't load locally, or it didn't for me and as soon as I put it on my web server it worked fine.
Amanda () - 10 years ago - Reply 0
My Problem:
On this bootsnipp.com-page it works fine (awesome is the better word though)
Now I downloaded the snippet and run it -> doesn't work (Safari, Chrome newest each)
Also - not to mention - it doesn't work in my page
It only shows the grey background to me
Moeh () - 10 years ago - Reply 0
The video just shows up as a grey background. and wont play at all. I figure it out I have no idea what's going on. What can you help us to improve it? Please
This code is very simple code to make it work.
<html>
<head>
<meta charset="UTF-8">
<title>youtube Chromeless Player - mb.YTPlayer</title>
<link href="../css/YTPlayer.css" media="all" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com..." rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/..."></script>
<script type="text/javascript" src="inc/jquery.mb.YTPlayer.js"></script>
<style>
.video-section .pattern-overlay {
background-color: rgba(71, 71, 71, 0.59);
padding: 110px 0 32px;
min-height: 496px;
/* Incase of overlay problems just increase the min-height*/
}
.video-section h1, .video-section h3{
text-align:center;
color:#fff;
}
.video-section h1{
font-size:110px;
font-family: 'Buenard', serif;
font-weight:bold;
text-transform: uppercase;
margin: 40px auto 0px;
text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;
}
.video-section h3{
font-size: 25px;
font-weight:lighter;
margin: 0px auto 15px;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
</style>
</head>
<body>
<section class="content-section video-section">
<div class="pattern-overlay">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Full Width Video</h1>
<h3>Enjoy Adding Full Screen Videos to your Page Sections</h3>
</div>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
</body>
</html>
Brian van Vlymen () - 10 years ago - Reply 0
So, I got this working eventually from a base bootstrap template AND working with animate.css and wow.js, so hooray! However, is there a way to change the video to span 100% height and width (full-page cover)? I looked at bigvideo.js, but it looks like that is for a static/ambient background video, which is not what I'm looking for. I tried adding the background-size element + a background image, but that doesn't seem to work.
Ideas?
Matt () - 10 years ago - Reply 0
Hi... I'm Matt.
To those having trouble: See if this way works.
STEP 1: I Downloaded https://codeload.github.com...
STEP 2: Unzipped file and uploaded folders to the website domains root directory, demo files not needed.
STEP 3: placed...
<script src="inc/jquery.mb.YTPlayer.js"></script>
in the index.html file under
<script src="js/jquery-1.11.0.js"></script>
at the bottom of the page, like so:
<script src="js/jquery-1.11.0.js"></script>
<script src="inc/jquery.mb.YTPlayer.js"></script>
STEP 4:
.video-section .pattern-overlay {
background-color: rgba(71, 71, 71, 0.59);
padding: 110px 0 32px;
min-height: 496px;
/* Incase of overlay problems just increase the min-height*/
}
.video-section h1, .video-section h3{
text-align:center;
color:#fff;
}
.video-section h1{
font-size:110px;
font-family: 'Buenard', serif;
font-weight:bold;
text-transform: uppercase;
margin: 40px auto 0px;
text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;
}
.video-section h3{
font-size: 25px;
font-weight:lighter;
margin: 0px auto 15px;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
...was added to the end of the bootstrap.min.css file in the CSS folder.
STEP 5:
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
...went to the end of the .js files in the JS folder. the bootstrap.min.js, bootstrap.js, and any associated with a custom template.
(Note: Not the /inc/js folder)
STEP 6: Difficult.. the message board doesn't allow the following code to be posted so I have to spell out (Bracket <) When you see... (bracket <), it means <.
Good luck.
<section class="content-section video-section">
<div class="pattern-overlay">
(bracket<)a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/wat... containment:' .video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a(bracket>)
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>customize text</h1>
<h3>change me</h3>
</div>
</div>
</div>
</div>
</section>
Was inserted to the index.html file under </nav>, and in my case above <header>
Delete the text if you want to get rid of it.
Hope this helps.
Dark_Fader () - 10 years ago - Reply 0
try changing the youtube link to just be this...i just fixed mine..
{videoURL:'KeGV0SqCK2Q' --> its the end of your current youtube link.
instead of the whole youtube link.. also use the latest js
https://codeload.github.com/pu...
also add this at the bottom of you page
<script>
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
</script>
CptSplendidPants () - 9 years ago - Reply 0
Great plug-in, thanks for sharing!! I have a question, is there any way to display the first frame of the video until the whole video loads?
Nico () - 10 years ago - Reply 0
hi hunzaboy,
Thanks for the great script that we've made ​​available,
I would like to know if there is a way to pause the video.
Thanks again
Alex Di Fazio () - 10 years ago - Reply 0
Hmm, might be a bit late, any chance to get this thing going with Vimeo?
driesdelaey () - 10 years ago - Reply 0
i am using ruby on rails with bootstrap-sass. The video just shows up as a grey background. Am I missing the mb_ytplayer javascript or coffee file? Is that a prereq? Thanks!
Susanne Rossignol () - 10 years ago - Reply 0
Is there a way to download the files you link to in the script at the top there, I can't rely on the hope that the site hosting them stays online???
Ollie () - 10 years ago - Reply 0
I have a little problem. I put on my site code html, added bootstrap.mini.css ,bootstrap.mini.js, and add css code from this video plugin. I also put the js code to new.js file and include to the site. And video not working. Here is my code:
<html>
<head>
<title>MY WEBSITE</title>
<meta name="description" content="Website .">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="WEB">
<link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap-theme.css" type="text/css">
<link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="new.css">
<link href="http://fonts.googleapis.com..." rel="stylesheet" type="text/css">
</head>
<body>
<section class="content-section video-section">
<div class="content-section video-section">
<div class="pattern-overlay">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Full Width Video</h1>
<h3>VIDEO</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="http://pupunzi.com/mb.compo..."></script>
<script src="jquery-searchable-master/jquery.searchable.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script src="new.js"></script>
</body>
</html>
And new.css:
.video-section .pattern-overlay {
background-color: rgba(71, 71, 71, 0.59);
padding: 110px 0 32px;
min-height: 496px;
/* Incase of overlay problems just increase the min-height*/
}
.video-section h1, .video-section h3{
text-align:center;
color:#fff;
}
.video-section h1{
font-size:110px;
font-family: 'Buenard', serif;
font-weight:bold;
text-transform: uppercase;
margin: 40px auto 0px;
text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;
}
.video-section h3{
font-size: 25px;
font-weight:lighter;
margin: 0px auto 15px;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
and new.js file:
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
Can you help me ?
dzwonek () - 10 years ago - Reply 0
I have a little problem. I put on my site code html, added bootstrap.mini.css ,bootstrap.mini.js, and add css code from this video plugin. I also put the js code to new.js file and include to the site. And video not working. Here is my code:
<html>
<head>
<title>MY WEBSITE</title>
<meta name="description" content="MSI dostarcza telewizjÄ™ cyfrowÄ…, internet.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="keywords" content="WEB">
<link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap-theme.css" type="text/css">
<link rel="stylesheet" href="bootstrap-3.1.1-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="new.css">
<link href="http://fonts.googleapis.com..." rel="stylesheet" type="text/css">
</head>
<body>
<section class="content-section video-section">
<div class="content-section video-section">
<div class="pattern-overlay">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Full Width Video</h1>
<h3>VIDEO</h3>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="http://pupunzi.com/mb.compo..."></script>
<script src="jquery-searchable-master/jquery.searchable.js"></script>
<script src="bootstrap-3.1.1-dist/js/bootstrap.min.js"></script>
<script src="new.js"></script>
</body>
</html>
And new.css:
.video-section .pattern-overlay {
background-color: rgba(71, 71, 71, 0.59);
padding: 110px 0 32px;
min-height: 496px;
/* Incase of overlay problems just increase the min-height*/
}
.video-section h1, .video-section h3{
text-align:center;
color:#fff;
}
.video-section h1{
font-size:110px;
font-family: 'Buenard', serif;
font-weight:bold;
text-transform: uppercase;
margin: 40px auto 0px;
text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;
}
.video-section h3{
font-size: 25px;
font-weight:lighter;
margin: 0px auto 15px;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
and new.js file:
$(document).ready(function () {
$(".player").mb_YTPlayer();
});
Can you help me ?
Guest () - 10 years ago - Reply 0
Hi, very good job but my youtube video does not appear. Nevertheless i don't have error in the code or any code error appear(in js or other). Anyone can help me please ?
Alex PaireRa () - 10 years ago - Reply 0
Hi Hunzaboy, a friend and I have been trying to get this to work on pages we presently have in development. Regardless of how we set this up, our present pages show the grey backround, but the video does not run. If we set up a fresh page with just basic bootstrap links and the video css and javascript script in the html code, then it works. So there is/are conflicts which we cannot quickly find, which would allow us to use the script in present pages. Any idea, what could cause any conficts?
mikehcg () - 10 years ago - Reply 0
Hi @Hunzaboy, I like the script, but just like the others, I get the grey frame but the video does not run. I think that my problem has to do with the javascript. I have tried using a .js file and have also tried bedding the script into the index.html, without success. Could provide the js code as it should appear in the index.html. I am sure it's only a small thing, but what is it?
mikehcg () - 10 years ago - Reply 0
can someone get it to work this snippet with bootply? i cannot seem to do.
Yusuf BektaÅŸ () - 10 years ago - Reply 0
will this work for non-YouTube videos? I want to host my own video on the server.
NM () - 10 years ago - Reply 0
Hello there,
Amazing framework!
Does someone know how to make it work on iphone / ipad though?
Thanks!
Boostrap Fan () - 10 years ago - Reply 0
That works amazingly well for me. Thank you for that.
The only thing is that I can see the google ad banner on the bottom. Do you guys know a way to get rid of the ad or should I choose specific YouTube videos that don't have ads on the bottom (and how to know which ones)?
Thanks again for this great work.
Gael () - 10 years ago - Reply 0
I'm new to bootstrap and js, and i was wondering where exactly does the js code go? Do I add it on to the bootsrap.min.js? Or do i make an entirely new js file and just link it?
Spacebar () - 10 years ago - Reply 0
You can just add the JS to the bottom of the page. If you are registered Bootsnipp user you can download the whole snippet to see where things are placed. Log in and navigate to the snippet, then click on the cog wheel to see the additional menu.
maxsurguy () - 10 years ago - Reply 0
XMLHttpRequest cannot load http://www.youtube.com/play.... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
I got this trying to run it locally, any help please?
Richie () - 10 years ago - Reply 0
I think you'd have to ask the plugin author here: http://pupunzi.open-lab.com...
maxsurguy () - 10 years ago - Reply 0
I am having issues getting the snip to work, yet it clearly does! I primarily use ASP.NET which sometimes has issues with jQuery, so I have built a page to test in pure HTML. I get an invalid character error on line 153 which is
property = $YTPlayer.data("property") && typeof $YTPlayer.data("property") == "string" ? eval('(' + $YTPlayer.data("property") + ')') : $YTPlayer.data("property");
Any ideas please?
Phil Smith () - 10 years ago - Reply 0
Hmmm, that could be coming of the eval function when something's not right in the property fields
maxsurguy () - 10 years ago - Reply 0
Thank you for the reply. I ended up taking it right back to basics thinking there must be a conflict in some scripts that were being loaded. It seems it was because just loading the scripts used in the sample worked.
Phil Smith () - 10 years ago - Reply 0
Anyone have an issue when adding this to their site the video is super tall and ignores the height ( overlay size ).. Basically mine doesnt fit nicely like preview... overlay is fine... just the video is too big and i would like it to fit the size of the overlay... whcih is the default size.
lasadorian () - 10 years ago - Reply 0
This is a nice snippet. Is it possible to get it to work on mobile? I'm using an iPhone and it seems to not be working.
H22Red () - 10 years ago - Reply 0
Well i haven't tested on mobile, but i don't see a reason for not working.
hunzaboy () - 10 years ago - Reply 0
It doesn't play the video on iPhone or Windows Phone. This could be worked around with browser detection though
Phil Smith () - 10 years ago - Reply 0
Your preview for this snippet does not seem to be working on my browser. I see the frame but no vides...I am using the latest Firefox. Any ideas?
Coder1 () - 10 years ago - Reply 0
Just Tested! Well its working on all the latest browsers and tablets.
hunzaboy () - 10 years ago - Reply 0
Thank you for the snippet! ***Dually note that if you want to develop this locally the video will not run unless it is on a server.***
Franz () - 10 years ago - Reply 0
It has nothing to do with the local server, as the url of the video is from youtube. You should be connected to internet and make sure Youtube is working. Also make sure you have included all the files including the js.
hunzaboy () - 10 years ago - Reply 0
Doesn't seem to work. Did you create a new javascript file to add the js. or did you add it into one of the existing javascript files?
k () - 10 years ago - Reply 0
Checkout the JS Part. Everything needed is already in the Snipp.
hunzaboy () - 10 years ago - Reply 0
its not full screen video, its full width background video, with text on it. :)
hunzaboy () - 10 years ago - Reply 0
very nice snip , can u someone please tell me , how can I add this to a div? Not full screen
JAYDEEP17 () - 10 years ago - Reply 0
