Posted By admin
Full Width Screen Video Background
Demo

The script you linked to is no longer there “script src=”http://pupunzi.com/mb.compo…””,Hey, is there a way to play/pause the video?much appreciated,If your having troubling with the styling in chrome, change the section tag to a div.,how do you get a video to work with a specific start time?,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.,how to add local path in videoURL:,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.,Is there a way to load more than one video and randomize them each time you enter the site?,is there a way to show the video in HD?,Perfect plugin! Nice Work!,WHERE I PUT,<link href=”http://fonts.googleapis.com…” rel=”stylesheet” type=”text/css”>,<script src=”http://pupunzi.com/mb.compo…”></script>,??,how can i use src video ?,Doesn’t work..? Using chrome.,Pls help, i need insert play/stop button, is possible?,Is it possible to play a non-Youtube video or a video located on my server?,Does not work with the following mp4 URL : http://i.istockimg.com/vide… Any idea ?,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,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?,For me the mute function doesn’t work at all? Any help please? :),Did you find a way too get it to mute? I’ve got the same problem..,hi, i get the solution. put URL https://www.youtube.com/wat…,Am I allowed to use this for my own homepage ?,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>,Managed to get it working, looks brilliant, nice work.,Спасибо, то что нужно,The video doesn’t auto play. You have to click the bg to make it start from Chrome.,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?,did you figure this out?,Hi! I was wondering if there´s a way to improve the load speed at the beginning.,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,How can you get the video playing without the lag at the beginning?,i have bug ,, video not play, Cannot read property ‘tagName’ of undefined ?,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 ?,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.,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>,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>,Is there a way to get the video to play automatically without the grey background in the beginning,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.,Can it play audio too? And can it autoplay instead of touch to start?,I’m a beginner. Do I need to add the HTML, CSS, and JS for this to work?,Yes — all 3 exactly as the code above specifies.,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.,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 pageIt only shows the grey background to me,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”>, 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>, <script>, $(document).ready(function () {, $(“.player”).mb_YTPlayer();, });, </script>,</body>,</html>,.,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?,I’m looking to change the height too.,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.,Thanks! This worked out perfect for me.,does this work out for you?,is this acting up for anyone else in chrome,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>,A conflict occurs when using Bootstrap Modal on page,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?,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,Hmm, might be a bit late, any chance to get this thing going with Vimeo?,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!,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???,The demo is not running on an iPad 3 iOS 7.1.1 in Safari browser.,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 ?,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 ?,hi! Could you create a jsFiddle for this ?,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 ?,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?,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?,can someone get it to work this snippet with bootply? i cannot seem to do.,will this work for non-YouTube videos? I want to host my own video on the server.,Hello there,Amazing framework!Does someone know how to make it work on iphone / ipad though?Thanks!,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.,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?,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.,not work on ie8 and mobile (safari iphone),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?,I think you’d have to ask the plugin author here: http://pupunzi.open-lab.com…,Thanks works great.,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?,Hmmm, that could be coming of the eval function when something’s not right in the property fields,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.,hunzaboy how can i contact you through email?,@hunzaboy,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.,add position:relative to .video-section,I cant seem to get this to work :/,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.,Well i haven’t tested on mobile, but i don’t see a reason for not working.,It doesn’t play the video on iPhone or Windows Phone. This could be worked around with browser detection though,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?,Just Tested! Well its working on all the latest browsers and tablets.,@Coder1, Refer to franz…,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.***,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.,The run on the server but still does not work, I can do?,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?,Checkout the JS Part. Everything needed is already in the Snipp.,I do not work, and is not in full screen,its not full screen video, its full width background video, with text on it. :),@JAYDEEP17:disqus, just change section to div :),very nice snip , can u someone please tell me , how can I add this to a div? Not full screen,change section to div,The author is hunzaboy

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *