I was trying to deploy my react app with firebase deploy. I accidentally clicked yes to the prompt: File build/index.html already exists. Overwrite? (y/N).
Now my index html is this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to Firebase Hosting</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/8.2.3/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/8.2.3/firebase-auth.js"></script>
<script defer src="/__/firebase/8.2.3/firebase-database.js"></script>
<script defer src="/__/firebase/8.2.3/firebase-messaging.js"></script>
<script defer src="/__/firebase/8.2.3/firebase-storage.js"></script>
<!-- initialize the SDK after all desired features are loaded -->
<script defer src="/__/firebase/init.js"></script>
<style media="screen">
body { background: #ECEFF1; color: rgba(0,0,0,0.87); font-family: Roboto, Helvetica, Arial, sans-serif; margin: 0; padding: 0; }
#message { background: white; max-width: 360px; margin: 100px auto 16px; padding: 32px 24px; border-radius: 3px; }
#message h2 { color: #ffa100; font-weight: bold; font-size: 16px; margin: 0 0 8px; }
#message h1 { font-size: 22px; font-weight: 300; color: rgba(0,0,0,0.6); margin: 0 0 16px;}
#message p { line-height: 140%; margin: 16px 0 24px; font-size: 14px; }
#message a { display: block; text-align: center; background: #039be5; text-transform: uppercase; text-decoration: none; color: white; padding: 16px; border-radius: 4px; }
#message, #message a { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); }
#load { color: rgba(0,0,0,0.4); text-align: center; font-size: 13px; }
#media (max-width: 600px) {
body, #message { margin-top: 0; background: white; box-shadow: none; }
body { border-top: 16px solid #ffa100; }
}
</style>
</head>
<body>
<div id="message">
<h2>Welcome</h2>
<h1>Firebase Hosting Setup Complete</h1>
<p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p>
<a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a>
</div>
<p id="load">Firebase SDK Loading…</p>
<script>
document.addEventListener('DOMContentLoaded', function() {
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
// // The Firebase SDK is initialized and available here!
//
// firebase.auth().onAuthStateChanged(user => { });
// firebase.database().ref('/path/to/ref').on('value', snapshot => { });
// firebase.messaging().requestPermission().then(() => { });
// firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
//
// // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
try {
let app = firebase.app();
let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
} catch (e) {
console.error(e);
document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
}
});
</script>
</body>
</html>
When I go to the url where my app is deployed, it shows this firebase welcome html. I realize I wasn't supposed to overwrite my html but how can I get my html back?
From the "Hosting" part of the Firebase console you can rollback previously deployed versions.
Under the "Dashboard" tab, there is a section named "--your_project_id-- release history" which shows the list of deployed versions. At the end of each line there is a three dots button. Click on it and choose the "Rollback" option.
Related
I am attempting to make it to where the button in the paragraph is used to toggle the viewability of the javascript array on/off. I'm not quite sure how to do it though.
Here's my html:
<body>
<div class="flexbox-container">
<h1 class="underline-small">
Heading One
</h1>
</div>
<h3 class="paragraph">Remove the duplicates in 2 Javascript arrays (found in readme), add the results to an array and output the list of distinct names in an unordered list below this paragraph when <button type="button" onclick="unshow()" id="btnID" class="javabutton">this link</button> is clicked. If the operation has been completed already, notify the user that this has already been done.</h2>
<script>
function unshow() {
document.getElementById('image')
.style.display = "none";
}
</script>
</div>
<script type="text/javascript">
let array1 = ["Matt Johnson", "Matt Johnson", "Bart Paden", "Ryan Doss", "Jared Malcolm"]
array2 = ["Matt Johnson", "Bart Paden", "Ryan Doss", "Jared Malcolm", "Jordan Heigle", "Tyler Viles"]
let set = new Set([...array1, ...array2]);
let newArray = [...set];
for(i=0;i<newArray.length;i++) {
document.write(newArray[i] + "<br/>");
}
</script>
</div>
</body>
</html>
and here's my CSS for styling:
.paragraph {
font-weight: 400;
color: white;
align-self: center;
font-size: 17px;
margin: -30px 75px 0px 75px;
}
.javabutton {
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease 0s;
font-family: 'Poppins', sans-serif;
font-weight: 700;
font-size: 16px;
color: #DEBF79;
text-decoration: none;
background-color: #222222;
}
I'm trying to find a way to grab comments from my Facebook Live video and have them available as a source in OBS so I can display or broadcast them. I found this example that works to some extent:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Facebook Live Comments</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" />
<style>
* {
box-sizing: border-box;
}
html,
body,
#comments {
height: 100%;
width: 100%;
}
html {
background: rgba(0, 0, 0, 0);
font-family: 'Roboto', sans-serif;
letter-spacing: 0.5px;
}
body {
margin: 0;
overflow: hidden;
}
#comments {
display: flex;
flex-direction: column;
padding: 8px 16px 8px 8px;
width: 100%;
overflow-y: scroll;
box-sizing: content-box;
}
.comment {
display: flex;
flex-direction: row;
}
.comment:first-child {
margin-top: auto;
}
.comment:not(:last-child) {
margin-bottom: 4px;
}
/**
* Prevent clipped comment
* margin-bottom: #comments padding-bottom + .comment margin-bottom
*/
.comment:last-child {
margin-bottom: 12px;
}
.comment__name {
flex: 0 1;
white-space: nowrap;
color: #2196F3;
}
.comment__name::after {
content: ": ";
white-space: pre;
}
.comment__message {
flex: 1 0;
color: #fff;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
</style>
</head>
<body>
<div id="comments"></div>
</body>
<script>
const videoId = ""; // ID of your live video
const accessToken = ""; // Get one on the developer page
const source = new EventSource(`https://streaming-graph.facebook.com/${videoId}/live_comments?access_token=${accessToken}&comment_rate=one_per_two_seconds&fields=from{name},message`);
const comments = document.getElementById("comments");
function appendComment(comment) {
const newComment = document.createElement("div");
newComment.classList.add("comment");
const commentName = document.createElement("div");
commentName.classList.add("comment__name")
commentName.textContent = comment.from.name;
const commentMessage = document.createElement("div");
commentMessage.classList.add("comment__message");
commentMessage.textContent = comment.message;
newComment.appendChild(commentName);
newComment.appendChild(commentMessage);
comments.appendChild(newComment);
comments.scrollTop = comments.scrollHeight;
}
// Get last 10 comments
fetch(`https://graph.facebook.com/v3.2/${videoId}/comments?access_token=${accessToken}&summary=true&limit=10`)
.then(res => res.json())
.then(res => {
res.data.forEach(comment => appendComment(comment));
});
// Listen for new comments
source.onmessage = function(event) {
const data = JSON.parse(event.data);
appendComment(data);
};
</script>
</html>
So, if I add in my video ID and access token and open the html file in a browser or OBS, it will show any comments already posted, but it won't update to show new ones unless I manually refresh the page. It seems like this code should be able to retrieve new comments, but I can't tell why it doesn't or if there are any errors in it.
What can I do to get this working? Or, is there another better way altogether?
I have a few controls that I am attempting to encapsulate on my webpage. I have tried a few different methods on encapsulating my controls and they have not succeeded. I tried using a div and this did not work too well and I have also tried this post:
Create a group box around certain controls on a web form using CSS
What is happening is that a box is being created but it is at the top of my webpage instead of around the controls.
I would like to create a grey box similar to the ones found on this webpage:
https://img.labnol.org/di/trigger1.png
Below, I am attaching a copy of the CSS and HTML code that I am using in order to create my form. The form is a simple file upload form that I tweaked from an example. I am using this on my own, personal website.
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el){
return document.getElementById(el);
}
function uploadFile(){
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event){
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
}
function completeHandler(event){
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event){
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event){
_("status").innerHTML = "Upload Aborted";
}
function changeText()
{
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<progress id="progressBar" value="0" max="100" style="width:508px; margin-left: -4px; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Here is the CSS (which is referred to in the html as test.css):
body{
background: rgba(0,0,0,0.0);
}
form{
position: absolute;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -250px;
width: 500px;
height: 200px;
border: 4px dashed #0D0D0D;
}
form p{
width: 100%;
height: 100%;
text-align: center;
line-height: 140px;
color: #0D0D0D;
font-family: Arial;
}
h2{
text-align: center;
}
form input[type="file"]{
position: absolute;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
outline: none;
opacity: 0;
}
form input[type="button"]{
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 508px;
height: 35px;
margin-top: -20px;
margin-left: -4px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover{
background: #149174;
color: #0C5645;
}
form input[type="button"]:active{
border:0;
}
form progressBar{
text-align: center;
}
Coming back to the HTML, the fieldset tags are placed around the controls that I am attempting to encapsulate. I left them there so that anyone can see the main issue that I am running into.
I apologize but I am very new to web programming. Any help will be greatly appreciated, thank you.
Note: how the box is created doesn't really matter to me. I would expect that the box is created in HTML and then I can style it using CSS.
The structure of your HTML is fine, but the position: absolute properties in your CSS are clashing with the fieldset.
Since <fieldset> is wrapping all your controls, I would suggeset giving it a fixed width and height and position your child elements based on that, i.e. use width: 100% for your children and give all of them the same margin so they align nicely. Also make sure you either edit your #progressBar style in the markup.
Here's a snippet with the changes I just mentioned:
body {
background: rgba(0, 0, 0, 0.0);
}
fieldset {
width: 508px;
height: 270px;
/* fixed width and height*/
margin: 13vh auto;
}
#p1 {
border: 4px dashed #0D0D0D;
/* modified the actual text box instead of the entire form */
width: 508px;
height: 140px;
line-height: 140px;
margin-top: 0px;
}
form p {
text-align: center;
color: #0D0D0D;
font-family: Arial;
}
h2 {
text-align: center;
}
form input[type="file"] {
position: absolute;
margin: 0;
outline: none;
width: 508px;
height: 140px;
margin: 22px 4px;
opacity: 1;
background-color: orange;
/* Last two properties are a visual representation. Delete background-color and set opacity to 0 */
}
form input[type="button"] {
margin: 0;
color: #fff;
background: #16a085;
border: none;
width: 100%;
/* width relative to parent fieldset */
height: 35px;
margin-top: -20px;
border-radius: 4px;
border-bottom: 4px solid #117A60;
transition: all .2s ease;
outline: none;
}
form input[type="button"]:hover {
background: #149174;
color: #0C5645;
}
form input[type="button"]:active {
border: 0;
}
form progressBar {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<script>
/* Script written by Adam Khoury # DevelopPHP.com */
/* Video Tutorial: http://www.youtube.com/watch?v=EraNFJiY0Eg */
function _(el) {
return document.getElementById(el);
}
function uploadFile() {
var file = _("file1").files[0];
// alert(file.name+" | "+file.size+" | "+file.type);
var formdata = new FormData();
formdata.append("file1", file);
var ajax = new XMLHttpRequest();
ajax.upload.addEventListener("progress", progressHandler, false);
ajax.addEventListener("load", completeHandler, false);
ajax.addEventListener("error", errorHandler, false);
ajax.addEventListener("abort", abortHandler, false);
ajax.open("POST", "file_upload_parser.php");
ajax.send(formdata);
}
function progressHandler(event) {
//_("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
var percent = (event.loaded / event.total) * 100;
_("progressBar").value = Math.round(percent);
_("status").innerHTML = Math.round(percent) + "% uploaded... please wait";
}
function completeHandler(event) {
_("status").innerHTML = event.target.responseText;
_("progressBar").value = 0;
document.getElementById('p1').innerHTML = "Drag your file here or click in this area.";
}
function errorHandler(event) {
_("status").innerHTML = "Upload Failed";
}
function abortHandler(event) {
_("status").innerHTML = "Upload Aborted";
}
function changeText() {
document.getElementById('p1').innerHTML = "1 file selected";
}
</script>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h2>Upload</h2>
<fieldset>
<legend>Group 1</legend>
<form id="upload_form" enctype="multipart/form-data" method="post">
<input type="file" name="file1" id="file1"><br>
<p id="p1">Drag your file here or click in this area.</p>
<input type="button" value="Upload File" onclick="uploadFile()">
<!-- changed progressBar style -->
<progress id="progressBar" value="0" max="100" style="width:100%; margin-top: 10px;"></progress>
<h3 id="status"></h3>
<p id="loaded_n_total"></p>
</form>
</fieldset>
<script>
// self executing function here
(function() {
document.getElementById('upload_form')[0].onchange = changeText;
})();
</script>
</body>
</html>
Hope it helps!
I'm trying to create a few website templates to help me improve my front end development skills, as I'm currently far better at rear end work.
I'm trying to somewhat replicate the style of my own website (https://thomas-smyth.co.uk/), which is a simple Bootstrap template. However, instead of using a static photo in the header, I want to replace it with a Youtube video. I began by cutting down the template used in my website and have stripped it down to as little as I think I can get it without breaking the header.
I have found a few pieces of code around the place to show how to set a Youtube video as background of the overall page, but not the background for specific sections of the page. How can I do this? Note - It has to be streamed from YouTube as my hosts don't allow me to host video's on their servers.
My current code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>Group Name | Home</title>
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="dist/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Custom -->
<link rel="stylesheet" href="dist/css/mainstyle.css">
</head>
<body>
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>This is going once vid is done.</h1>
</div>
</div>
</header>
<section class="bg-primary">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<h2 class="section-heading">Placeholder!</h2>
<p>I should have found a witty comment to put here, but I'm just gonna put "Placeholder" instead.</p>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="dist/bootstrap/js/bootstrap.min.js"></script>
<script src="dist/js/mainscript.js"></script>
</body>
</html>
CSS
html,
body {
height: 100%;
width: 100%;
}
body {
font-family: 'Merriweather', 'Helvetica Neue', Arial, sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 20px;
}
.bg-primary {
background-color: #F05F40;
}
section {
padding: 100px 0;
}
.no-padding {
padding: 0;
}
header {
position: relative;
width: 100%;
min-height: auto;
background-image: url('../img/header.jpg');
background-position: 0% 80%;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
text-align: center;
color: white;
}
header .header-content {
position: relative;
text-align: center;
padding: 100px 15px 100px;
width: 100%;
}
header .header-content .header-content-inner h1 {
font-weight: 700;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
font-size: 30px;
}
#media (min-width: 768px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
padding: 0 50px;
}
header .header-content .header-content-inner {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
header .header-content .header-content-inner h1 {
font-size: 50px;
}
}
.section-heading {
margin-top: 0;
}
::-moz-selection {
color: white;
text-shadow: none;
background: #222222;
}
::selection {
color: white;
text-shadow: none;
background: #222222;
}
img::selection {
color: white;
background: transparent;
}
img::-moz-selection {
color: white;
background: transparent;
}
body {
webkit-tap-highlight-color: #222222;
}
Best I have so far (does whole page's background)
<div class="video-background">
<div class="video-foreground">
<iframe src="https://www.youtube.com/embed/W0LHTWG-UmQ?controls=0&showinfo=0&rel=0&autoplay=1&loop=1&playlist=W0LHTWG-UmQ" frameborder="0" allowfullscreen></iframe>
</div>
</div>
CSS
* { box-sizing: border-box; }
.video-background {
background: #000;
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -99;
}
.video-foreground,
.video-background iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
#media (min-aspect-ratio: 16/9) {
.video-foreground { height: 300%; top: -100%; }
}
#media (max-aspect-ratio: 16/9) {
.video-foreground { width: 300%; left: -100%; }
}
I've created a simple example with Youtube video background using direct links to video stream (JS/CSS only solution). Feel free to check it on JSfiddle. Also, you can update public Google Image proxy URL to any public or your own CORS proxy.
var vid = "FUUw3zNTXH8",
streams,
video_tag = document.getElementById("video");
fetch("https://images" + ~~(Math.random() * 33) + "-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURIComponent("https://www.youtube.com/watch?hl=en&v=" + vid)).then(response => response.text()).then(function(data) {
if (data) {
streams = parse_youtube_meta(data);
video_tag.src = streams['hls'] || streams['720pna'] || streams['480pna'] || streams['720p'] || streams['480p'] || streams['360p'] || streams['240p'] || streams['144p'];
} else {
alert('Youtube API Error');
}
});
function parse_youtube_meta(rawdata) {
var regex = /(?:ytplayer\.config\s*=\s*|ytInitialPlayerResponse\s?=\s?)(.+?)(?:;var|;\(function|\)?;\s*if|;\s*if|;\s*ytplayer\.|;\s*<\/script)/gmsu;
rawdata = rawdata.split('window.getPageData')[0];
rawdata = rawdata.replace('ytInitialPlayerResponse = null', '');
rawdata = rawdata.replace('ytInitialPlayerResponse=window.ytInitialPlayerResponse', '');
rawdata = rawdata.replace('ytplayer.config={args:{raw_player_response:ytInitialPlayerResponse}};', '');
var matches = regex.exec(rawdata);
var data = matches && matches.length > 1 ? JSON.parse(matches[1]) : false;
console.log(data);
var streams = [],
result = {};
if (data.streamingData && data.streamingData.adaptiveFormats) {
streams = streams.concat(data.streamingData.adaptiveFormats);
}
if (data.streamingData && data.streamingData.formats) {
streams = streams.concat(data.streamingData.formats);
}
streams.forEach(function(stream, n) {
var itag = stream.itag * 1,
quality = false,
itag_map = {
18: '360p',
22: '720p',
37: '1080p',
38: '3072p',
82: '360p3d',
83: '480p3d',
84: '720p3d',
85: '1080p3d',
133: '240pna',
134: '360pna',
135: '480pna',
136: '720pna',
137: '1080pna',
264: '1440pna',
298: '720p60',
299: '1080p60na',
160: '144pna',
139: "48kbps",
140: "128kbps",
141: "256kbps"
};
//if (stream.type.indexOf('o/mp4') > 0) console.log(stream);
if (itag_map[itag]) result[itag_map[itag]] = stream.url;
});
if (data.streamingData && data.streamingData.hlsManifestUrl) {
result['hls'] = data.streamingData.hlsManifestUrl;
}
return result;
};
html, body {
height: 100%;
min-height: 100%;
background: #444;
overflow: hidden;
}
video {
width: 100%;
height: 100%;
object-fit: cover;
}
<video loop muted autoplay playsinline id="video"></video>
I found here a tutorial that explains how to set a video as a background of your page. This tutorial shows how to make the video as a fullscreen background and a background for only a specific page like you want.
You need to set your Html and CSS part to achieve this kind of background. The tutorial page includes some sample code that you can copy.
Hope it helps you.
Thanks to the above, I actually came up with a different method when the old one died out. Maybe not as good as the above, but it works for me. This is made into a WP Plugin and the user sets the height and a few other options like Video ID, mute and volume. Also using YouTube API.
Can see it here at the top of my website: https://neotropicworks.com/
// Output from plugin onto page using 'wp_add_inline_script' to JS file below
var video_id = "qnTsIVYxYkc",video_mute = true,video_volume = 50;
// JS file
var player;
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
player = new YT.Player('youtube-header-player', {
videoId: video_id,
playerVars: {
playlist: video_id,
loop: 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
if(video_mute){
player.mute();
} else {
player.setVolume(video_volume);
}
}
function onPlayerStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
player.playVideo();
}
}
In a stylesheet
.video-wrapper{width: 100%;overflow: hidden;position: relative;}
.video-container {position: absolute;width: auto;top: -50%;left: 0;right: 0;bottom: -50%;}
.video-bg {background: none;position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;}
.video-bg .video-fg,.video-bg iframe,.video-bg video {position: absolute;top: 0;left: 0 !important;width: 100% !important;height: 100%;}
Below is generated output from user on the height they want. They set sizes for the different devices, window sizes for better control.
.video-wrapper{height: 400px;}
.video-container {height: 800px;}
#media (min-width: 768px) and (max-width: 991px) {
.video-wrapper{height: 300px;}
.video-container {height: 600px;}
}
#media (max-width:767px) {
.video-wrapper{height: 200px;}
.video-container {height: 400px;}
}
The HTML
<div class="video-wrapper">
<div class="video-container">
<div class="video-bg">
<div class="video-fg" id="youtube-header-player"></div>
</div>
</div>
</div>
Just sharing a simple jQuery plugin I've made, to make your lives easier.
You only need to select an element with a data-youtube attribute containing a youtube link or ID only. Everything else is done for you by the plugin, including embed api script injection and CSS.
Here is a quick usage sample. You can see it in action here.
<div id="ytbg" data-youtube="https://www.youtube.com/watch?v=eEpEeyqGlxA"></div>
<script type="text/javascript">
jQuery(document).ready(function() {
$('[data-youtube]').youtube_background();
});
</script>
Code on GitHub.
I am using Scrollable paper-tabs - Polymer. I have placed a NEXT button above the tabs and I want to change the position of the selected bar(bar which is displayed on bottom of the selected tab ) on next button's click. I am new to Ploymer. Any help will be appreciated.
https://www.polymer-project.org/0.5/components/paper-tabs/demo.html
in order to change the position of the selected bar you can change the paper-tabs's index selection. It's better to use tabs.selectIndex(); function than selectNext(); in order to make the change cyclic : meaning once you've reached the end, it will select the first element and so on, if you provide the right index.
Here's the javascript function to do that :
function clickAction(e) {
var t = e.target;
if (t.localName === 'paper-icon-button') {
if (!t.hasAttribute('disabled')) {
var tabs = document.querySelector('paper-tabs');
var index = tabs.selectedIndex;
index = index+1 == tabs.children.length ? 0 : index + 1;
tabs.selectIndex(index);
}
}
}
If you need a working sample, here's the one I've been working one (it's from Polymer's official documentation with a bit more) :
<!doctype html>
<html>
<head>
<title>paper-tabs</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="core-icons/core-icons.html">
<link rel="import" href="font-roboto/roboto.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<link rel="import" href="core-toolbar/core-toolbar.html">
<link rel="import" href="core-media-query/core-media-query.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<style shim-shadowdom>
body {
font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
margin: 0;
padding: 24px;
color: #333;
}
body.core-narrow {
padding: 8px;
}
paper-tabs, core-toolbar {
background-color: #00bcd4;
color: #fff;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
core-toolbar paper-tabs {
box-shadow: none;
}
paper-tabs[noink][nobar] paper-tab.core-selected {
color: #ffff8d;
}
paper-tabs.transparent-teal {
background-color: transparent;
color: #00bcd4;
box-shadow: none;
}
paper-tabs.transparent-teal::shadow #selectionBar {
background-color: #00bcd4;
}
paper-tabs.transparent-teal paper-tab::shadow #ink {
color: #00bcd4;
}
h3 {
font-size: 16px;
font-weight: 400;
}
</style>
</head>
<body>
<div>
<paper-icon-button icon="arrow-forward" title="arrow-forward" onclick="clickAction(event)"></paper-icon-button>
</div>
<paper-tabs selected="0">
<paper-tab>ITEM ONE</paper-tab>
<paper-tab>ITEM TWO</paper-tab>
<paper-tab>ITEM THREE</paper-tab>
</paper-tabs>
<script>
function clickAction(e) {
var t = e.target;
if (t.localName === 'paper-icon-button') {
if (!t.hasAttribute('disabled')) {
var tabs = document.querySelector('paper-tabs');
var index = tabs.selectedIndex;
index = index+1 == tabs.children.length ? 0 : index + 1;
tabs.selectIndex(index);
}
}
}
</script>
</body>
</html>