I am attempting to create a horizontal scroll of a ul populated by an ajax call to an xml document. As constituted, the content will scroll but the list items are stacked rather than side by side. Research suggests that I can achieve the desired result with some simple css. However, I have been unable to successfully make this happen...
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<link href="css/wneRSS.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="rss">
<div class="list"><ul class="feeder"></ul></div>
</div>
</body>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "XMLSource",
dataType: "xml",
success: function(xml){
$(xml).find('row').each(function(){
var sfirst = $(this).find('First').text();
var slast = $(this).find('Last').text();
var scity = $(this).find('PermanentCity').text();
var sstate = $(this).find('PermanentRegion').text();
$("<li></li>").html(sfirst + " " + slast + " - " + scity + ", " + sstate).appendTo("#rss ul");
});
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
});
</script>
</html>
CSS:
body {
margin: 0;
padding: 0;
background-color: #373737;
color: white;
font-family: sans-serif;
overflow: hidden;
}
#rss {
width: 1920px;
height: 82px;
margin:0px;
}
.list ul {
padding: 0;
margin: 0;
border: 0;
float: left;
display: inline;
width: auto;
}
.list ul li {
float: left;
margin: 0;
padding: 0;
border: 0;
display: inline;
}
.feeder {
font-size: 40px;
line-height: 82px;
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
animation: scroller 60s linear infinite;
}
#keyframes scroller {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
Added width=auto to the container solved the problem.
Your container may not be wide enough to accommodate your list items. You need to nest the unordered list elements in a container wide enough that they do not break.
Related
I am creating an application that trains my memory by memorising colours. Every 2 seconds, the colour of the box will change from one to another. However if it switches to the same colour, it becomes difficult to differentiate. I am hoping to implement a blink effect when it transits to another colour. I tried to use blink animation by adjusting the time but it does not work well. How can i implement with my current code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#count {
font-size: 36px;
}
.section__hero {
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 50px;
position: relative;
}
#countdownTimer {
position: absolute;
font-size: 72px;
left: 50%;
top: 50%;
transform:translate(-50%,-50%)
}
.section__btns {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 10px
}
#count,
#element,
#btn__answer,
#countdownTimer {
visibility: hidden;
}
#element {
height: 100px;
width: 100px;
background-color: #000;
border: 1px solid black;
}
#btn__action,
#btn__answer {
padding: 15px 30px;
border: none;
font-size: 18px;
color: #fff;
border-radius: 8px;
cursor: pointer;
/* display: block; */
}
#btn__action {
background-color: #332cf2;
}
#btn__answer {
background-color: #000;
text-decoration: none;
}
</style>
<title>Document</title>
</head>
<body>
<div class="section__hero">
<div id="countdownTimer"></div>
<div id="count"></div>
<div id="element"></div>
<div class="section__btns">
<button id="btn__action" onclick="action()">Start</button>
Answer
</div>
</div>
</body>
<script>
const colors = ["#000", "#fff", "#ffff00", "#ff0000"];
const btnsSect = document.getElementsByClassName("section__btns");
const recallSect = document.getElementsByClassName("section__recall");
const verfiySect = document.getElementsByClassName("section__verify");
const actionBtn = document.getElementById("btn__action");
const answerBtn = document.getElementById("btn__answer");
const element = document.getElementById("element");
const count = document.getElementById("count");
const countdownTimer = document.getElementById("countdownTimer");
let interval;
let answers = {};
let nextState = "Start";
let countdownValue = 4;
let elementCount = 0;
let isCountdown = false;
function action() {
switch (nextState) {
case "Start":
start();
break;
case "Stop":
stop();
break;
case "Reset":
reset();
break;
}
}
function start() {
nextState = "Stop";
actionBtn.innerHTML = nextState;
actionBtn.style.visibility = "visible";
element.style.visibility = "visible";
count.style.visibility = "visible";
changeElementColour();
interval = setInterval(changeElementColour, 2000);
interval = setInterval(changeElementColour, 2000);
}
function changeElementColour() {
const newElement = colors[Math.floor(Math.random() * colors.length)];
element.style.backgroundColor = newElement;
answers[elementCount] = newElement
elementCount++;
count.innerHTML = elementCount;
}
</script>
</html>
You can use animation:
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#element{
animation: blinker 2s cubic-bezier(0, 0, 0.9, -0.02) infinite;
}
Simply add a css animation that lets you render a transition between the inverse of the color that last the duration you want it to say 1/60 a second, and you may wish to apply additional details. You can trigger this to happen each time by simply changing toggling a temporary class to retrigger the animation.
CSS For Inverting the Color
From W3Schools
/* The animation code */
#keyframes example {
from {filter: inverse(1);}
to {filter: inverse(0);}
}
//make sure to add browser extensions for webkit
/* The element to apply the animation to */
div.class {
animation-name: example;
animation-duration: 0.3s;
animation-timing-sequence: ease-in-out;
}
This code was modified from W3Schools and needs to be adjusted to meet your exact application's needs.
Simply Toggle off/on The Class this css is placed on using Javascript and the animation should replay
Also Jquery and Javascript both have great API's for handling Animation Events as well that you may play around with.
See CSS Animations
Toggling Classes With JQuery
Getting Animation Events With JQuery
I have a report page, where I have my menus, my headers, footers, etc. However I would like to have an option that the report content can be enlarged to full window size (not full screen) with a transition. I'm experimenting with this example:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_zoom_hover
My main problem is I can't make it transition the movement too, not just the enlargement. It instantly jumps to the top left corner without any transition, while the 100% width and 100% height transition works.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0;
left: 0;
position: fixed;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
</body>
</html>
I've been searching for a solution, however most of the results are regarding full screen, and not full window.
By default the position property of .zoom is static, transition is not able to handle change of display type.
So you may need to set position: absolute; for .zoom and preset the position.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
.zoom {
position: absolute;
top: 120px;
left: 120px;
background-color: green;
width: 200px;
height: 200px;
}
.zoom:hover {
transition: all 1s;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
</body>
</html>
The issue is that you are changing the position to fixed and your top/left values are immediately considering thus the jump. Also I don't think there is a CSS solution to have a transition from the static position to the fixed position by specifying top/left only on hover. The rule of transtion is to have an initial value and a final value.
An idea here is to rely on some JS in order to set a the intial value of top/left values and allow the transition to work fine:
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return {
x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
};
}
var e=document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left=pos.x+ 'px';
e.style.top=pos.y + 'px';
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0!important;
left: 0!important;
position: fixed;
width: 100%;
height: 100%;
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
To be more accurate you need to adjust the values on the window scroll and window resize:
function getPosition(element) {
var xPosition = 0,
yPosition = 0;
while (element) {
xPosition += (element.offsetLeft + element.clientLeft);
yPosition += (element.offsetTop + element.clientTop);
element = element.offsetParent;
}
return {
x: (xPosition - document.documentElement.scrollLeft || document.body.scrollLeft),
y: (yPosition - document.documentElement.scrollTop || document.body.scrollTop)
};
}
var e = document.querySelector('.zoom');
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
window.addEventListener('scroll', function() {
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
});
window.addEventListener('resize', function() {
var pos = getPosition(e);
e.style.left = pos.x + 'px';
e.style.top = pos.y + 'px';
});
* {
box-sizing: border-box;
}
.zoom {
background-color: green;
width: 200px;
height: 200px;
margin: auto;
}
.zoom:hover {
transition: all 1s;
top: 0!important;
left: 0!important;
position: fixed;
width: 100%;
height: 100%;
}
<h1>Zoom on Hover</h1>
<p>Hover over the div element.</p>
<div class="zoom"></div>
I've created a basic CSS Grid and had everything positioned where I wanted it. When I run my JS (appends info from an API call to a div), the div's dimension push beyond the borders of the viewport. Is there a way to prevent the overall body element from changing and just have the div dynamically increase height?
pics: https://imgur.com/a/wJAcW
I've tried so many different things and can't seem to figure this out. My fallback will be to just overwrite the div rather than append to it. Code is below.
//Set initial latitute and longitude variables, to be used later
var lat = 0;
var long = 0;
//Google Geocode API to find the latitude and longitude of the txtAddress
$("#submit").on("click", function() {
var userInput = $("#txtAddress").val();
//trim the user input to the form needed for the api
var userSearchTerm = userInput.split(' ').join('+');
//call the google geocode api
var queryURLGeocode = "https://maps.googleapis.com/maps/api/geocode/json?address=" + userSearchTerm + "&key=AIzaSyCSAYHZn9fz13c3bsl_RcS13HJu8wDJXCU"
$.ajax({
url: queryURLGeocode,
method: "GET"
})
.done(function(response) {
//Set latitude and longitude from the returned object
lat = response.results[0].geometry.location.lat;
//limit decimal points to 4 (xx.xxxx) - form needed for hiking api
lat = lat.toFixed(4);
long = response.results[0].geometry.location.lng;
long = long.toFixed(4);
//Call the hiking project api
var queryURL = "https://www.hikingproject.com/data/get-trails?lat=" + lat + "&lon=" + long + "&maxDistance=10&key=200206461-4fa8ac1aa85295888ce833cca1b5929f"
$.ajax({
url: queryURL,
method: "GET"
})
.done(function(response) {
// loop through the response trails and add info to the site
for (i = 0; i < response.trails.length; i++) {
var contentDivTitle = $("<div> class='newTrailTitle'");
var contentDivMain = $("<div> class='newTrailDescription'");
contentDivTitle.text("Name: " + response.trails[i].name + " Location: " + response.trails[i].location);
contentDivMain.text("Summary: " + response.trails[i].summary);
$("#search-results").append(contentDivTitle);
$("#search-results").append(contentDivMain);
}
});
});
});
html,
body {
background-color: black;
margin: 10px;
}
h1,
h3 {
color: white;
text-align: center;
padding: 5px;
line-height: 1px;
}
h1 {
/* automatically changes lowercase to uppercase text; */
text-transform: uppercase;
}
sub {
color: white;
text-align: center;
line-height: 1px;
font-size: 15px;
font-weight: lighter;
}
.container {
display: grid;
grid-template-columns: auto;
grid-template-rows: 800px 500px 200px 50px 100px;
grid-gap: 3px;
}
.container>div {
display: flex;
justify-content: center;
align-items: center;
font-size: 1em;
}
.container>div:nth-child(1n) {
background-color: black;
}
.container>div:nth-child(2n) {
background-color: blue;
}
.container>div:nth-child(3n) {
background-color: red;
}
.container>div:nth-child(4n) {
background-color: yellow;
}
.container>div:nth-child(5n) {
background-color: green;
}
label {
color: white;
}
#main {
background-image: url("assets/images/etienne-bosiger-367964.jpg");
background-size: cover;
background-repeat: no-repeat;
}
#au,
#cr {
display: block;
margin: auto;
}
#groupPic {
padding: 10px;
}
<html>
<head>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<div id="main">
<div id="title">
<h1>kairns<sub>®</sub></h1>
<h3>"find your trail"</h3>
<div class="search-div">
<label for="txtAddress">Enter Address: </label>
<input type="text" name="txtAddress" id="txtAddress">
<button type="button" id="submit">Search</button>
</div>
</div>
</div>
<div class="search-results" id="search-results">2</div>
<div>
<p id="au">About Us</p>
<img id="groupPic" src="http://via.placeholder.com/150x150" alt="placeholder image">
<p id="cr">Copyright 2018.</p>
</div>
<div>4</div>
<div>
<p>Powered by
Google Maps,
Open Weather Map, and Hiking Project
</p>
</div>
</div>
<!-- JAVASCRIPT -->
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- custom javaScript -->
<script type='text/javascript' src='assets/javascript/logic.js'></script>
</body>
</html>
All in-flow children of the #search-results element will align vertically if you apply:
#search-results {
display: flex;
flex-direction: column;
}
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.
http://clubace.dk/viewright_test.htm
The green div at the bottom of the page is overlapped by the player as soon as the player loads.
I've tried setting wmode to 'transparent' in both the object tag and the param tag, but that doesn't help.
<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script type="text/javascript">
function changeChannel(url, chanid)
{
var player = document.getElementById('ViewRightControl');
var video = document.getElementById('video');
if (video != null)
{
video.src = url;
video.load();
video.play();
}
else if (player != null)
{
player.Close();
player.Open(url, false);
}
if(chanid != 0)
{
update(chanid);
}
else
{
tvclear();
}
}
function update(channelid) {
$.getJSON('api.php', function(data) {
console.log(data[channelid][0]);
$('.now').html("<strong>" + data[channelid][0]['title'] + "</strong><br>" + data[channelid][0]['starttime'] + "<br>");
$('.next').html("<strong>" + data[channelid][1]['title'] + "</strong><br>" + data[channelid][1]['starttime'] + "<br>");
});
}
function tvclear() {
$('.now').html("No data");
$('.next').html("No data");
}
</script>
<style type="text/css">
body {
background: black;
cursor: auto;
-webkit-user-select: none;
user-select: none;
overflow: hidden;
}
:::-webkit-scrollbar {
display: none;
}
#ViewRightControl {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 1;
}
#selectorHolder {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 200px;
background: green;
z-index: 100;
}
</style>
</head>
<body onload="changeChannel('http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8', 0);">
<object id="ViewRightControl" type="application/x-viewright-m3u8" wmode="transparent">
<param name="wmode" value="transparent">
</object>
<div id="selectorHolder">
</div>
</body></html>
I'm using this ViewRight plugin from Verimatrix (for Windows):
http://warehouse.yousee.tv.s3.amazonaws.com/misc/plugin/YouSee.msi
I found a solution!!
It's a NPAPI plugin and here's a way to put something on top of that: HTML on top of NPAPI plugin