Updated on May 06, 2021
Vadootv Player is a video hosting service that is currently on sale in Appsumo.
This tutorial provides the steps to set up Vadootv’s iframe to appear as a background for a section.
Generic instructions are given at the top followed by Oxygen-specific ones.
Step 1
Since there is no setting for disabling audio in Vadootv, if your video has embedded sound you might want to first remove it using a video editor.
coverr.co provides free videos that you could use for following along.
Step 2
Upload your video to Vadootv if you haven’t already.
Since we want the video to appear as a background let us turn off elements and controls from appearing.
In your Vadootv Player account, select your video > Customization
- Video watermark: off
- Play button: off
- Speed: off
- Playbar: off
- Autoplay: on
- Play in loop: on (optional if you want the video to continue looping)
- Bottom control bar: off
- Touch to play/pause: off
Step 3
Add this sample HTML in your webpage:
<section class="vbg__container">
<div class="vbg__video">
<iframe frameborder="0" src="https://api.vadoo.tv/iframe_test?id=PzCWMvccoMYEBrjvMaHALPSKKvKkyk6J" scrolling="no" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" width="3200" height="1800">
</iframe>
</div>
<div class="vbg__overlay-content">
<h1 class="vbg__heading">Take your WordPress website development skills to the next levels using Oxygen</h1>
<p class="vbg__tagline">All the step-by-step tutorials you need to create advanced and functional websites</p>
<a href="#" class="vbg__button">See Our Tutorials</a>
</div>
<div class="vbg__icon">
<a href="#">
<svg class="bounce" aria-hidden="true" focusable="false" data-prefix="far" data-icon="arrow-alt-circle-down" class="svg-inline--fa fa-arrow-alt-circle-down fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm-32-316v116h-67c-10.7 0-16 12.9-8.5 20.5l99 99c4.7 4.7 12.3 4.7 17 0l99-99c7.6-7.6 2.2-20.5-8.5-20.5h-67V140c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12z"></path></svg>
</a>
</div>
</section>Replace PzCWMvccoMYEBrjvMaHALPSKKvKkyk6J with the ID of your Vadoo video.
CSS:
.vbg__container {
color: #fff;
background: url(img/first-frame.jpg) center no-repeat cover;
position: relative;
padding: 150px 0;
display: flex;
justify-content: center;
}
.vbg__container:before {
display: block;
clear: both;
content: '';
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(35, 44, 57, 0.5);
content: '';
pointer-events: none;
}
.vbg__video {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: auto;
pointer-events: none;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.vbg__video iframe {
position: absolute;
top: -30%;
right: -30%;
bottom: -30%;
left: -30%;
width: 160%;
min-width: 100%;
max-width: 160%;
height: 160%;
min-height: 56.25vw;
max-height: none;
margin: auto;
}
.vbg__overlay-content {
position: relative;
text-align: center;
z-index: 2;
}
.vbg__tagline,
.vbg__button {
margin-top: 40px;
}
.vbg__button {
display: inline-block;
background: #ddd;
padding: 16px 50px;
border-radius: 4px;
}
.bounce {
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-14px);
}
60% {
transform: translateY(-7px);
}
}
.vbg__icon {
position: absolute;
bottom: 20px;
z-index: 1;
}
.vbg__icon a {
color: #fff;
}
.vbg__icon svg {
width: 32px;
height: 32px;
}We are setting the first frame of the video as background image for the video container section so that it appears initially before the video finishes loading.
If you are on Mac, open the video in QuickTime Player, press Cmd + C, open Preview and press Cmd + N to have the first frame pasted and save it as a jpg.
For Oxygen users
Below is the 1-click Hydrogen code.
You need either Hydrogen Pack or Hydrogen Paste to paste the entire section in your Oxygen editor.
eyJzb3VyY2UiOiJodHRwczovL2Rldi53ZWJ0ZWNoYmFzZS5jb20iLCJjb21wb25lbnQiOlt7ImlkIjoyLCJuYW1lIjoiY3Rfc2VjdGlvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjIsImN0X3BhcmVudCI6MTAwMDAzLCJzZWxlY3RvciI6InNlY3Rpb24tMi0yMDEiLCJvcmlnaW5hbCI6eyJwb3NpdGlvbiI6InJlbGF0aXZlIiwiYWxpZ24taXRlbXMiOiJjZW50ZXIiLCJ0ZXh0LWFsaWduIjoiY2VudGVyIiwiY29sb3IiOiIjZmZmZmZmIiwiY29udGFpbmVyLXBhZGRpbmctdG9wIjoiMTUwIiwiY29udGFpbmVyLXBhZGRpbmctYm90dG9tIjoiMTUwIiwiYmFja2dyb3VuZC1pbWFnZSI6Imh0dHBzOi8vZGV2LndlYnRlY2hiYXNlLmNvbS93cC1jb250ZW50L3VwbG9hZHMvMjAyMS8wNC9maXJzdC1mcmFtZS5qcGciLCJiYWNrZ3JvdW5kLXBvc2l0aW9uLWxlZnQtdW5pdCI6IiUiLCJiYWNrZ3JvdW5kLXBvc2l0aW9uLWxlZnQiOiI1MCIsImJhY2tncm91bmQtcG9zaXRpb24tdG9wLXVuaXQiOiIlIiwiYmFja2dyb3VuZC1wb3NpdGlvbi10b3AiOiI1MCIsImJhY2tncm91bmQtcmVwZWF0Ijoibm8tcmVwZWF0In0sImFjdGl2ZXNlbGVjdG9yIjpmYWxzZSwiYmVmb3JlIjp7InBvc2l0aW9uIjoiYWJzb2x1dGUiLCJ0b3AiOiIwIiwicmlnaHQiOiIwIiwibGVmdCI6IjAiLCJib3R0b20iOiIwIiwiei1pbmRleCI6IjEiLCJiYWNrZ3JvdW5kLWNvbG9yIjoicmdiYSgzNSwgNDQsIDU3LCAwLjUpIn19LCJjaGlsZHJlbiI6W3siaWQiOjMsIm5hbWUiOiJjdF9jb2RlX2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6MywiY3RfcGFyZW50IjoyLCJzZWxlY3RvciI6ImNvZGVfYmxvY2stMy0yMDEiLCJvcmlnaW5hbCI6eyJjb2RlLXBocCI6IjxkaXYgY2xhc3M9XCJ2YmctY29udGFpbmVyXCI+PGlmcmFtZSBmcmFtZWJvcmRlcj1cIjBcIiBzcmM9XCJodHRwczovL2FwaS52YWRvby50di9pZnJhbWVfdGVzdD9pZD1QekNXTXZjY29NWUVCcmp2TWFIQUxQU0tLdktreWs2SlwiIHNjcm9sbGluZz1cIm5vXCIgYWxsb3dmdWxsc2NyZWVuPVwiMVwiIGFsbG93PVwiYWNjZWxlcm9tZXRlcjsgYXV0b3BsYXk7IGNsaXBib2FyZC13cml0ZTsgZW5jcnlwdGVkLW1lZGlhOyBneXJvc2NvcGU7IHBpY3R1cmUtaW4tcGljdHVyZVwiIHdpZHRoPVwiMzIwMFwiIGhlaWdodD1cIjE4MDBcIj48L2lmcmFtZT48L2Rpdj4iLCJjb2RlLWNzcyI6IiIsIndpZHRoLXVuaXQiOiIlIiwid2lkdGgiOiIxMDAifSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlLCJjdF9jb250ZW50IjoiIn0sImRlcHRoIjoxfSx7ImlkIjo0LCJuYW1lIjoiY3RfZGl2X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6NCwiY3RfcGFyZW50IjoyLCJzZWxlY3RvciI6ImRpdl9ibG9jay00LTIwMSIsIm9yaWdpbmFsIjp7ImFsaWduLWl0ZW1zIjoiY2VudGVyIiwicG9zaXRpb24iOiJyZWxhdGl2ZSIsInotaW5kZXgiOiIyIn19LCJjaGlsZHJlbiI6W3siaWQiOjUsIm5hbWUiOiJjdF9oZWFkbGluZSIsIm9wdGlvbnMiOnsiY3RfaWQiOjUsImN0X3BhcmVudCI6NCwic2VsZWN0b3IiOiJoZWFkbGluZS01LTIwMSIsIm9yaWdpbmFsIjp7ImxpbmUtaGVpZ2h0IjoiMS4zIiwiZm9udC1zaXplIjoiNDYifSwibWVkaWEiOnsicGhvbmUtcG9ydHJhaXQiOnsib3JpZ2luYWwiOnsiZm9udC1zaXplIjoiMjgifX19LCJjdF9jb250ZW50IjoiVGFrZSB5b3VyJm5ic3A7V29yZFByZXNzIHdlYnNpdGUgZGV2ZWxvcG1lbnQgc2tpbGxzIHRvIHRoZSBuZXh0IGxldmVscyB1c2luZyBPeHlnZW4ifSwiZGVwdGgiOjF9LHsiaWQiOjYsIm5hbWUiOiJjdF90ZXh0X2Jsb2NrIiwib3B0aW9ucyI6eyJjdF9pZCI6NiwiY3RfcGFyZW50Ijo0LCJzZWxlY3RvciI6InRleHRfYmxvY2stNi0yMDEiLCJvcmlnaW5hbCI6eyJmb250LXNpemUiOiIyMCIsIm1hcmdpbi10b3AiOiI0MCJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsIm1lZGlhIjp7InBob25lLXBvcnRyYWl0Ijp7Im9yaWdpbmFsIjp7ImZvbnQtc2l6ZSI6IjE2In19fSwiY3RfY29udGVudCI6IkFsbCB0aGUgc3RlcC1ieS1zdGVwIHR1dG9yaWFscyB5b3UgbmVlZCB0byBjcmVhdGUgYWR2YW5jZWQgYW5kIGZ1bmN0aW9uYWwgd2Vic2l0ZXMifSwiZGVwdGgiOjF9LHsiaWQiOjcsIm5hbWUiOiJjdF9saW5rX2J1dHRvbiIsIm9wdGlvbnMiOnsiY3RfaWQiOjcsImN0X3BhcmVudCI6NCwic2VsZWN0b3IiOiJsaW5rX2J1dHRvbi03LTIwMSIsIm9yaWdpbmFsIjp7Im1hcmdpbi10b3AiOiI0MCIsInVybCI6IiMiLCJ1cmxfZW5jb2RlZCI6InRydWUifSwiYWN0aXZlc2VsZWN0b3IiOmZhbHNlLCJjdF9jb250ZW50IjoiU2VlIE91ciBUdXRvcmlhbHMifSwiZGVwdGgiOjF9XSwiZGVwdGgiOjR9LHsiaWQiOjgsIm5hbWUiOiJjdF9saW5rIiwib3B0aW9ucyI6eyJjdF9pZCI6OCwiY3RfcGFyZW50IjoyLCJzZWxlY3RvciI6ImxpbmstOC0yMDEiLCJvcmlnaW5hbCI6eyJ1cmwiOiIjc2VjdGlvbi0xMC0yMDEiLCJ1cmxfZW5jb2RlZCI6InRydWUifX0sImNoaWxkcmVuIjpbeyJpZCI6OSwibmFtZSI6ImN0X2ZhbmN5X2ljb24iLCJvcHRpb25zIjp7ImN0X2lkIjo5LCJjdF9wYXJlbnQiOjgsInNlbGVjdG9yIjoiZmFuY3lfaWNvbi05LTIwMSIsIm9yaWdpbmFsIjp7Imljb24taWQiOiJMaW5lYXJpY29uc2ljb24tY2hldnJvbi1kb3duLWNpcmNsZSIsInBvc2l0aW9uIjoiYWJzb2x1dGUiLCJib3R0b20iOiI1MCIsImljb24tY29sb3IiOiIjZmZmZmZmIiwiei1pbmRleCI6IjEiLCJpY29uLXNpemUiOiIzMiJ9LCJhY3RpdmVzZWxlY3RvciI6ZmFsc2UsImNsYXNzZXMiOlsiYm91bmNlIl0sImN0X2NvbnRlbnQiOiIifSwiZGVwdGgiOjF9XSwiZGVwdGgiOjR9XSwiZGVwdGgiOjN9XSwiY2xhc3NlcyI6eyJib3VuY2UiOnsicGFyZW50IjoiQ29waWVkIENsYXNzZXMiLCJvcmlnaW5hbCI6e319fSwiY29sb3JzIjp7fX0=
Add this CSS at Manage > Stylesheets:
.vbg-container {
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
margin: auto;
pointer-events: none;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.vbg-container iframe {
position: absolute;
top: -30%;
right: -30%;
bottom: -30%;
left: -30%;
width: 160%;
min-width: 100%;
max-width: 160%;
height: 160%;
min-height: 56.25vw;
max-height: none;
margin: auto;
}
.bounce {
-moz-animation: bounce 3s infinite;
-webkit-animation: bounce 3s infinite;
animation: bounce 3s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-14px);
}
60% {
transform: translateY(-7px);
}
}