Video Background

Need help? Please give a detailed explanation of your problem.
Post Reply
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Video Background

Post by Agalassi1792 »

Hello,

Is there a way to set a video as a background for a section in APWT? Ideally, we want to do this through bootstrap, not the new page builder, as this site is only using bootstrap for its pages.

Let me know of any css or any code needed so we can add this. Also, would I be able to host a 21MB video file on APWT's media library, and if not, would I be able to add the file to a folder via FTP and point to that?

Let me know about all of this, thanks!
User avatar
Kathlein
Support Team
Support Team
Posts: 144
Joined: Tue Jul 11, 2017 8:03 am
Website: www.allprowebtools.com

Re: Video Background

Post by Kathlein »

Are you looking for something that looks like this: https://www.theoysterchannel.com/Home-video/

or this: http://www.synergyvideography.com/

Both of these websites are built in AllProWebTools.

You are certainly welcome to load a large video file on the AllProWebTools hosting, but both of the above examples are pulling video directy from a hidden link on youtube. This saves your client on bandwidth costs, and also, hosting video with youtube (or vimeo) ensures that the video will be compatible on all browsers and all devices.

You should be able to view the source on both of the above examples to pull the appropriate CSS and HTML to accomplish this.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Video Background

Post by Agalassi1792 »

Hi Kathlein,

I would like to do something like the example on: http://www.synergyvideography.com/

Can you send me the code for that? I am able to examine the code, but I'm not finding a clean html code, at least nothing that I think I can use to copy and paste into a site very easily.

But okay, Vimeo should work for this then.

Let me know about this, thank you!
User avatar
NoahBaldwin
Support Team
Support Team
Posts: 117
Joined: Fri Jan 04, 2019 11:21 am
Website: www.allprowebtools.com

Re: Video Background

Post by NoahBaldwin »

You will need to change the video link at "videoURL"

Copy and paste this code into the WYSIWYG (TinyMCE) editor in the html code section.

You may need to change CSS/text for your site but all of the code is listed below:

Code: Select all

<style>
.video-section {
background: rgba(71, 71, 71, 0.59) url(/content/uploads/foundsynergy-1900.jpg) no-repeat center center;
}
.video-section .pattern-overlay {
   background-color: rgba(71, 71, 71, 0.59);
   padding: 70px 0 32px;
   min-height: 500px;
   vertical-align: middle;
   line-height: 500px;
}
.video-section h1, .video-section h3{
text-align:center;
color:#fff;
}
.video-section h1 {
font-size: 70px;
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: 50px;
font-weight:lighter;
margin: 0px auto 15px;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
.video-wrapper {
margin: 10px auto;
}
iframe#mbYTP_bgndVideo {
}
@media screen and (max-width: 992px) {
.signup-title {
font-size: 19px;
margin-top: 10px;
}
}
@media screen and (max-width: 767px) {
.header-links ul.pull-left {
float: none !important;
text-align: center;
}
}
 .header-top .call-now {
float: none;
text-align: center;
}
 article .col-md-12 img {
float: none;
margin: 10px auto !important;
}
.video-section h1 {
   font-size: 39px;
}
@media screen and (max-width: 600px) {
iframe {
max-width: 100%;
height: auto;
}
}
@media screen and (max-width: 370px) {
.video-section h1 {
   font-size: 30px;
}
 .video-section h3 {
   font-size: 40px;
}
}
</style>

Code: Select all

<p>
<script src="//lib.allprowebtools.com/5.0/includes/jquery.mb.YTPlayer.min.js"></script>
</p>
<section style="position: relative;" class="content-section video-section">
<div class="buttonBar"><span class="mb_YTPPlaypause ytpicon">P</span><span class="mb_YTPMuteUnmute ytpicon">A</span>
<div style="display: inline-block; cursor: default;" class="mb_YTPVolumeBar simpleSlider muted">
<div class="level horizontal">&nbsp;</div>
</div>
<span class="mb_YTPTime">00 : 04 / 01 : 01</span><span class="mb_YTPUrl ytpicon" title="view on YouTube">Y</span><span class="mb_OnlyYT ytpicon">O</span></div>
<div style="position: absolute;" class="mb_YTPProgress">
<div style="position: absolute; left: 0px; width: 100%;" class="mb_YTPLoaded">&nbsp;</div>
<div style="position: absolute; left: 0px; width: 0px;" class="mb_YTPseekbar">&nbsp;</div>
</div>
<div style="position: absolute; z-index: 0; min-width: 100%; min-height: 100%; left: 0px; top: 0px; overflow: hidden; opacity: 1; transition-property: opacity; transition-duration: 2000ms;" class="mbYTP_wrapper" id="wrapper_mbYTP_bgndVideo">
<div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;" class="YTPOverlay">&nbsp;</div>
</div>
<div style="position: relative;" class="pattern-overlay"><span style="display: none;" class="CmCaReT">?</span><a style="display: none; background-image: none;" class="player mb_YTPlayer isMuted" id="bgndVideo" data-property="{videoURL:'https://www.youtube.com/watch?v=9--1w5Q_CmU',containment:'.video-section', quality:'default', autoPlay:true, mute:true, opacity:1}"></a>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Synergy Videography</h1>
</div>
</div>
</div>
</div>
</section>
<p>
<script>// <![CDATA[
$(document).ready(function () { $(".player").mb_YTPlayer(); });
// ]]>
</script>
</p>
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Video Background

Post by Agalassi1792 »

Hi,

Thank you for your reply and all the code.

I was able to duplicate it. But every single time i add in my own video it stops working:

https://vimeo.com/334986258

Does Vimeo not work here or something?

Let me know, thanks!
User avatar
NoahBaldwin
Support Team
Support Team
Posts: 117
Joined: Fri Jan 04, 2019 11:21 am
Website: www.allprowebtools.com

Re: Video Background

Post by NoahBaldwin »

The plugin used in this code is specific to YouTube. It will not work with videos from other sources. You could publish the video privately on YouTube and swap the link into this code.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Video Background

Post by Agalassi1792 »

Okay that's fine.

Do you have a code for Vimeo? I would much prefer to use Vimeo. But I can use YouTube for now.
User avatar
Dave
Support Team
Support Team
Posts: 1221
Joined: Wed May 11, 2011 10:30 am
Website: www.allprowebtools.com
Contact:

Re: Video Background

Post by Dave »

I am sorry, we do not have any experience doing this with Vimeo.
User avatar
Agalassi1792
AllPro Expert
AllPro Expert
Posts: 510
Joined: Tue Nov 18, 2014 12:42 pm
Website: apwt.bluezenith.com

Re: Video Background

Post by Agalassi1792 »

okay no worries.

Thanks for your help with this though!
Post Reply