I'm trying to embed a Vimeo video on a mobile website. I want the users to see the Vimeo controls every time without scrolling in any direction. At the same time, the video needs to be centred (horizontally and vertically) on the screen.
Below is my current implementation, it is not working as expected.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=0 minimum-scale=1">
<style>
.embed-responsive-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body style="background-color:green">
<div class="embed-responsive embed-responsive-16by9">
<div id="video" style="background-color:red" class="embed-responsive-item"></div>
</div>
<script id="vimeo" async src="https://player.vimeo.com/api/player.js"></script>
<script>
function loadVimeoVideo() {
var options = {
id: '253989945',
transparent: 1,
}
var player = new Vimeo.Player('video', options)
}
var script = document.querySelector('#vimeo');
script.addEventListener('load', function () {
loadVimeoVideo();
});
</script>
</body>
</html>
Related
i am trying to swap the path of lottie / bodymovin on button click,
it works if i dont populate the animPath parameter first, so it seems like the click function cannot overwrite the parameter if there is already a path.
its like it loads in the data at the start and then thats it, i noticed the same thing with updating the speed, i had to call the setSpeed parameter after changing the speed to get it to update.
ive hunted the internet and can;t seem to find a parameter to setPath or something similar
does anyone know of a way to swap the path on click?
here is my code
var anim
var animationSpeed = 2;
var button = document.getElementById("button");
function runAnimation(animPath) {
console.log("lottie is loaded");
var animData = {
container: document.getElementById("test"),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: animPath
};
anim = bodymovin.loadAnimation(animData);
anim.setSpeed(animationSpeed);
}
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_lef8tmad.json");
$( "button" ).click(function() {
animationSpeed = 1;
anim.setSpeed(animationSpeed);
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_vuxs5lpt.json");
console.log("path 2 loaded");
});
body {
background-color: #FDC800;
overflow: hidden;
text-align: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#animationWindow {
width: 100%;
height: 100%;
}
#button{
width: 100px;
height:40px;
z-index: 10;
position: absolute;
top:200px;
left:200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lottie swap</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie.min.js" integrity="sha512-ilxj730331yM7NbrJAICVJcRmPFErDqQhXJcn+PLbkXdE031JJbcK87Wt4VbAK+YY6/67L+N8p7KdzGoaRjsTg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head><script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-player/1.5.7/lottie-player.js" integrity="sha512-wUgyNk7aI5qo1G294znyaFsJi8JbXTyTn7QEViCh+f021/yo6aKHPw3GX19txyhfiLQIB/duQcSKADt1GqE+KA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<div id="test">
</div>
<button id="button" >Click me</button>
</body>
</html>
<!-- Link to the script-->
<script type="module" src="js/script.js"></script>
I'm trying to dynamically change the iframe URL, for doing so I'm calling to the window.onmessage = (event) => function and fire the URL as event.data variable, this happened from external button.
When I click on the external button the iframe is shown the right URL but after 3 seconds change to black (blank URL), why does it happen, and how to solve it?
**
The ifame code
**
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<style>
body { background: #232323; width: 95%; margin: 0 auto; }
/* Responsive Container for iFrame */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<title>Tech Ops PH | your < IT / design < partner </title>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("myIframe").src=event.data
}
}
</script>
</head>
<body>
<div class='embed-container embed-responsive embed-responsive-4by3'>
<iframe id="myIframe" width="600" height="9000" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>
I want to make a loading animation for my webpage which will take 8-10 sec to load using JavaScript or Ajax(Which I don't know)
The loading animation is a progress bar
Which I want to stop for every 1 sec for increment of 10% eg( https://codepen.io/gustitammam/pen/RRXGdj )
Bootstrap is not welcomed and I don't want text and percentage on it
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D:\PORTFOLIO\master.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.js" integrity="sha512-qsjFwnCEe/k1YLJDkiRqDgKb+Eq+35xdoeptV7qfI7P6G/kajIF0R6d/9SiOxSkU/aNmHzuipOEYaTUHCJUIeQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/javascript.util/0.12.12/javascript.util.min.js" integrity="sha512-oHBLR38hkpOtf4dW75gdfO7VhEKg2fsitvHZYHZjObc4BPKou2PGenyxA5ZJ8CCqWytBx5wpiSqwVEBy84b7tw==" crossorigin="anonymous"></script>
</head>
<body>
<div id="myprogress">
<div id="mybar">
<span id="incvalue">1%</span>
</div>
</div>
<br> <button onclick="move()">ClickMe</button>
<script>
const move = () => {
var elem = document.getElementById("mybar");
var width = 1;
var id = setInterval(frame, 10)
function frame(){
if(width >= 100){
clearInterval(id);
}else{
width++;
elem.style.width = width + "%";
document.getElementById("incvalue").innerHTML = width + "%";
}
}
}
</script>
</body>
</html>
CSS
html{
scroll-behavior: smooth;
}
body{
background: #181818;
color: #f4eee8;
}
#myprogress{
width: 45%;
background: #181818;
margin: auto;
}
#mybar{
width: 1%;
background: white;
color: white;
text-align: center;
}
In the example you cited, you can just comment out the JS lines where the following fields are set:
.attr and .text
Regarding your desire to omit Bootstrap, however, you are not asking a simple technical question but proposing that somebody write a whole program fragment for you, which is generally not the intended purpose of Stack overflow.
Actually I didn't do it but I don't know his Stack ID so #0_0#1045(From Discord)
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="D:\PORTFOLIO\master.css">
</head>
<body>
<h3>Dynamic Progress Bar</h3>
<p>Running progress bar from 0% to 100% in 10 seconds</p>
<div class="progress">
<div class="current-progress">
</div>
</div>
</div>
<script src="master.js"></script>
</body>
</html>
CSS
html{
scroll-behavior: smooth;
}
body{
background: #181818;
color: #f4eee8;
height: 100vh;
width: 100vw;
}
.progress {
position: relative;
margin-top: 20px;
height: 20px;
width: 700px;
background-color: #181818;
}
.current-progress {
height: 100%;
width: 0%;
background-color: white;
text-align: center;
transition: all 0.3s;
}
JS
let progressValue = 0;
const progressBar = document.querySelector(".current-progress");
progressBar.style.width = `${progressValue}%`;
const timer = setInterval(() => {
if (progressValue < 100) {
progressValue += 10;
progressBar.style.width = `${progressValue}%`;
}
if (progressValue === 100) {
clearInterval(timer);
}
}, 1000);
Finally Solved!!!
I was trying to position several images in a so they overlap with each other. I want to use absolute positioning, but for reason all of the images position themselves relative to the and not to each other. If I use s instead of images this works. It appears that, unlike s, images do not position themselves relative to other images but only to a , is that correct?
CSS
#container2 {
width: 340px;
height: 200px;
border: 1px solid black;
position: absolute;
top: 250px;
}
.playingcard {
width: 72px;
height: 100px;
position: absolute;
left: 0px;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div id=container2>
</div>
<script src=script.js></script>
</body>
</html>
JavaScript
const imageArray = ['/images/back/purple_back.png', '/images/back/red_back.png', '/images/back/yellow_back.png' ];
const container2 = document.getElementById('container2');
console.log(container2);
for (i = 0; i < imageArray.length; i++) {
const newImage = new Image();
newImage.src = imageArray[i];
newImage.className = 'playingcard';
imgArray = container2.getElementsByTagName('img');
console.log(imgArray.length);
if (imgArray.length == 0) {
container2.appendChild(newImage);
} else {
newImage.style.top = (i * 20) + 'px';
imgArray[imgArray.length - 1].appendChild(newImage);
}
}
Thanks
Denis
2 Observations
Your this code is never going to execute in a the for loop.
if (imgArray.length == 0) {
container2.appendChild(newImage);
}
You are pushing image in imageArray, so your structure will be like this
<container2>
<img src="src1">
<img src="src2">
<img src="src3">
</img>
</img>
</img>
</container2>
Here even if you use position absolute to each image will be absolute to its parent. so you will see overlapping images.
Replace your else condition with this (Remove if also)
else {
newImage.style.top = (i * 20) + 'px';
container2.appendChild(newImage); // ADD THIS
// imgArray[imgArray.length - 1].appendChild(newImage); // REMOVE THIS
}
Your structure now will be as you are expecting. You can play around with the CSS to get a view you want.
Your problem is that all img tags are nested within each other. Due to this, your top rule did not work. Example without condition if.
const imageArray = ['https://avatars.mds.yandex.net/get-pdb/2265897/d83bbab3-4bc4-42cc-8d62-a21b4c77ed72/s1200', 'https://64.img.avito.st/1280x960/4394790064.jpg', 'https://i.mycdn.me/i?r=AyH4iRPQ2q0otWIFepML2LxRUoA1zBVpY6nfGdB73g4vbw' ];
const container2 = document.getElementById('container2');
console.log(container2);
for (i=0; i<imageArray.length; i++) {
const newImage = new Image();
newImage.src = imageArray[i];
newImage.className = 'playingcard';
imgArray = container2.getElementsByTagName('img');
console.log(imgArray.length);
container2.appendChild(newImage);
newImage.style.top = (i * 20) + 'px';
}
#container2 {
width: 340px;
height: 200px;
border: 1px solid black;
position: absolute;
top: 250px;
}
.playingcard {
width: 72px;
height: 100px;
position: absolute;
left: 0px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
</head>
<body>
<div id=container2>
</div>
<script src=script.js></script>
</body>
</html>
I have some code to get the size of the body on screen during a window resize event and use this elsewhere, however for some reason the size that is determined is always the size before the resizing:
$(document).on('ready', function () {
initResize();
});
function initResize() {
$(window).on('resize', doResize).trigger('resize');
};
function doResize() {
var wh = $('.game').height();
var ww = $('.game').width();
console.log("game " + ww +"x" +wh);
}
and the console output always returns the same data, yet if I change the selector to $(window) it changes as the window resizes. Can someone help please?
the html is very simple:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/myStyle.css" /
<script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/init.js"></script>
</head>
<body>
<section class="game">
</section>
</body>
</html>
and the css:
#charset "utf-8";
* {
padding: 0;
margin: 0;
border: none;
outline: none;
}
html {
font-size: 62.5%;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}