How do I fix my navbar to have a profile with image? - javascript

I just needed help with something, how do I make it for my nav bar to have an image in the profile image?
Image for how I would like it to look:
Image for how I would like it to look (also to make it more clear than vague).
.navbar__link {
position: static;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px;
margin: 20px 0;
border-radius: 10px;
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
display: flex;
text-align: center;
display: inline-block;
padding: 20px;
}
}
// you don't need to add class to a tag, it can be selected by following way
.navbar>a {
text-decoration: none;
padding: 15px;
}
.header {
display: flex;
// make the header take all space of body
width: 100%;
}
.navbar {
display: flex;
// make navbar take all space that remains after the logo
flex: 1;
justify-content: center;
// make the navbar move left side else it will not be in complete middlle
transform: translate(-100px);
}
* {
margin: 0;
padding: 0;
}
.loading-screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.logo {
width: 48px;
height: 48px;
}
.loading-bar {
width: 130px;
height: 2px;
background: #ffffff;
margin-top: 22px;
position: relative;
overflow: hidden;
}
.loading-bar::before {
content: '';
width: 68px;
height: 2px;
background: #000000;
position: absolute;
left: -34px;
animation: blackbar 1.5s infinite ease;
}
#keyframes blackbar {
50% {
left: 96px;
}
}
<body onload="handlePageLoaded()">
<header>
<div style="float: left; padding-right: 10px;">
<img width='200' height='50' src='Icons/Seencast home.png' />
</div>
<div class="navbar" style="justify-content: center;">
<a href="discovery.html" class="navbar__link">
<span class="material-icons">whatshot</span>
</a>
<a href="profile.html" class="navbar__link">
<span class="material-icons">person_outline</span>
</a>
</div>
<!-- Loading Screen -->
<div class="loading-screen">
<div class="loading-animation">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="90px" height="90px" viewBox="0 0 90 90" enable-background="new 0 0 90 90" xml:space="preserve"> <image id="image0" width="90" height="90" x="0" y="0"
xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaAQAAAAAQ03yvAAAABGdBTUEAALGPC/xhBQAAACBjSFJN
AAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAAAmJLR0QAAd2KE6QAAAAJcEhZ
cwAACxMAAAsTAQCanBgAAAAHdElNRQfkBwsBJxoCRYkNAAAAmElEQVQ4y2P4jwAHGEY5w5zzhx2J
8xPO3n+A4TMq5/CP2vYPFfZMzCCO5XOb4vPf54Bkfv6veT/n9/3/d0CcP3Y15+f+ng/h/OdjOCAL
5NyzB3GO1Z//+3v+D3l+EOcZmPP4/mME5/n9zyDOc/vnf3/ffz4fxPl+3u753d/nn8/9PP8Awwf5
Az9kf38oiOE/PBjCbZRDNw4Awv38T7O+5eEAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDctMTFU
MDE6Mzk6MjYrMDM6MDDkTb6MAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTA3LTExVDAxOjM5OjI2
KzAzOjAwlRAGMAAAAABJRU5ErkJggg==" />
</svg>
<div class="loading-bar"></div>
</div>
</div>
</header>
<script>
window.onload = () => {
const loader = document.querySelector('.loading-screen');
loader.style.display = 'none';
}
</script>
</body>
<script>
/* Loading Script */
window.onload = () => {
const loader = document.querySelector('.loading-screen');
loader.style.display = 'none';
}
</script>
</body>
UPDATES will go under here, will be updated every 10 minutes!
ex: [UPDATE 1] EXAMPLE
real: [UPDATE 1] Nothing so far :/.
[UPDATE 2] Nothing so far :/.

Related

Using SCSS with the variable and Javascript could't read my variable and complained about setProperty

It supposed to show two different images by moving the slider to the left or right.
enter image description here
However, i got this error.
enter image description here
Seems like the setProperty isnt working properly as I wished and I tried to use plain CSS they complained about
enter image description here
So probably the javascript isnt working properly?
Does anyone know what's the problem is? thanks
HTML
<main>
<div class="container">
<div class="image-container">
<img class="image-before slider-image"
src="/img/before.png" alt="before image">
<img class="image-after slider-image"
src="/img/after.png" alt="before image">
</div>
<input type="range" min="0" step="10" max="100" value="50" class="slider" aria-label="Percentage of before photo shown" />
<div class="slider-line">
<div class="slider-button" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><line x1="128" y1="40" x2="128" y2="216" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><line x1="96" y1="128" x2="16" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="48 160 16 128 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline><line x1="160" y1="128" x2="240" y2="128" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line><polyline points="208 96 240 128 208 160" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg>
</div>
</div>
</div>
</main>
SCSS
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
$white : #dddddd;
$position: 50%;
$box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
img {
display: block;
max-width: 100%;
}
main {
display: grid;
place-items: center;
min-height: 100vh;
}
.container {
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
position: $position;
}
.image-container {
max-width: 800px;
max-height: 90vh;
aspect-ratio: 1/1;
}
.slider-image{
width: 100%;
height: 100%;
object-fit: cover;
object-position: left;
}
.image-before {
position: absolute;
inset: 0;
width: $position;
}
.slider {
position: absolute;
inset: 0;
cursor: pointer;
opacity: 0;
// for firefox
width: 100%;
height: 100%;
&:focus-visible ~ .slider-button{
outline: 5px solid black;
outline-offset: 3px;
}
}
// .slider:focus-visible ~ .slider-button {
// outline: 5px solid black;
// outline-offset: 3px;
// }
.slider-line {
position: absolute;
inset: 0;
width: 0.2rem;
height: 100%;
background-color: $white;
z-index: 10;
left: $position;
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: $white;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: $position;
transform: translateX(-50%);
pointer-events: none;
z-index: 100;
box-shadow: $box-shadow;
}
JS
const container = document.querySelector(".container");
document.querySelector(".slider").addEventListener("input", (e) => {
container.style.setProperty(`$position`), `${e.target.value}%`;
});
I think you're closing the parenthesis pair of setProperty early. ${e.target.value}% is the second argument of this function call.
Also, the property set, is position (just as it is in CSS), not $position
document.querySelector(".slider").addEventListener("input", (e) => {
container.style.setProperty(`position`, `${e.target.value}%`);
});
The answer was already solved :
It seems like due to the (What runs) chrome extension, this issue is occurring.
Error handling response: TypeError: self.processResponse is not a function
If it didn't help you, just tell me.
I figured out two problems in here. First is the parenthesis closed wrongly. Second is SASS is a CSS preprocessor, which means that all SASS specific information disapears when you compile it to CSS. How to control Sass Variable with javascript
hence, here is my solution
scss
$position: 50%;
.container {
display: grid;
place-content: center;
position: relative;
overflow: hidden;
border-radius: 1rem;
--position: var(--position, $position);}
.image-before {
position: absolute;
inset: 0;
width: var(--position, $position);
}
.slider-line {
position: absolute;
inset: 0;
width: 0.2rem;
height: 100%;
background-color: $white;
z-index: 10;
left: var(--position, $position);
transform: translateX(-50%);
pointer-events: none;
}
.slider-button {
position: absolute;
background-color: $white;
padding: .5rem;
border-radius: 100vw;
display: grid;
place-items: center;
top: 50%;
left: var(--position, $position);
transform: translateX(-50%);
pointer-events: none;
z-index: 100;
box-shadow: $box-shadow;
}
app.js
const container = document.querySelector(".container");
document.querySelector(".slider").addEventListener("input", (e) => {
container.style.setProperty(`--position`, `${e.target.value}%`);
});```

I tried creating a image popup but failed badly here my script anyone can help me out

hello all I am working on image popup that appears after clicking on banner I tried some basic js concept but failed badly . looking forward HELP pps
"""
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<a class="close" href="#">×</a>
</div>
</div>
<button href="#popup_flight_travlDil3" onclick="show('cover')">kk</button>
<a class="close_flight_travelDl" href="#">×</a>
<script>
$(function(){
$("button-link").click(function(){
$(".cover").fadeIn("300");
})
$(".cover,.close").click(function(){
$(".cover").fadeOut("300");
})
$(".contents").click(function(e){
e.stopPropagation();
})
})
</script>
<style>
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
z-index: 5;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: 30px;
right: 20px;
transition: all 200ms;
font-size: 95px;
font-weight: bold;
text-decoration: none;
color: #000000;
}
</style>
"""
LOOKING FOR SOLUTION THAT REPLACE BUTTON WITH THE A CLASS LINK OR ANYOTHER WAY ROUND
replacing button with an img tag and adding eventListener to open or close the popup
let btn = document.querySelector(".btn");
let cover = document.querySelector(".cover");
let closebtn = document.querySelector(".close");
btn.addEventListener("click", () => {
cover.classList.toggle("active")
})
closebtn.addEventListener("click", () => {
cover.classList.remove("active")
})
.cover {
background: rgba(0, 0, 0, 0.7);
position: fixed;
display: none;
opacity: 100;
margin-left: 100px;
z-index: 5;
}
.cover.active {
display: block;
}
.contents {
background: #fff;
margin: 70px auto;
border: 5px solid #ccc;
border-radius: 30px;
position: relative;
z-index: 5;
padding: 10px;
width: 33%;
height: 10%;
}
.close {
position: absolute;
top: -10px;
right: 10px;
transition: all 200ms;
font-size: 65px;
font-weight: bold;
text-decoration: none;
color: #000000;
background-color: transparent;
border: none;
}
<!-- popup main -->
<div class="cover">
<div class="contents">
<img src="https://cdn.shopify.com/s/files/1/0605/0680/0349/files/PIGEON_a37dee29-65ce-4314-b624-e468c334fc9d.jpg?v=1664194339" alt="gh" width="100%" height="100%" />
<button class="close">×</button>
</div>
</div>
<img class="btn" src="https://images.unsplash.com/photo-1657299156538-e08595d224ca?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwzMXx8fGVufDB8fHx8&auto=format&fit=crop&w=500&q=60" alt "">

Fixing position and responsiveness

I'm having trouble with positioning of my design. The idea was to create a circle flow with a text-box on hover in the middle. I've made it works on my website but whenever I decrease the screen resolution, it's messed up. I'm new with css, and wondering if there's any simple way to create this design?
.circle {
width: 170px;
height: 170px;
border-radius: 85px;
background: rgba(76, 175, 80, 0.1);
border-style: solid;
border-color: #00fcff;
}
.hoverWrapper1:hover #hoverShow1 {
display: block;
}
.hoverWrapper1 #hoverShow1 {
display: none;
}
.hoverWrapper2:hover #hoverShow2 {
display: block;
}
.hoverWrapper2 #hoverShow2 {
display: none;
}
.hoverWrapper3:hover #hoverShow3 {
display: block;
}
.hoverWrapper3 #hoverShow3 {
display: none;
}
.hoverWrapper4:hover #hoverShow4 {
display: block;
}
.hoverWrapper4 #hoverShow4 {
display: none;
}
.hoverWrapper5:hover #hoverShow5 {
display: block;
}
.hoverWrapper5 #hoverShow5 {
display: none;
}
.hoverWrapper6:hover #hoverShow6 {
display: block;
}
.hoverWrapper6 #hoverShow6 {
display: none;
}
.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #00fcff;
}
.absolute {
position: absolute;
top: 29%;
width: 400px;
height: 300px;
right: 50%;
border: 1px solid #00fcff;
padding: 7px;
font-size: 80%;
background: rgba(76, 175, 80, 0.1);
}
<div class="hoverWrapper1">
<button class="circle" style="position:absolute; top: 3%; right: 63%; color:#00fcff; font-size: 120%;">Strategy</button>
<div id="hoverShow1" class="absolute" style="color: white;">Even strategy is no longer what it used to be. We all live in a VUCA World. (volatile, uncertain, complex and ambiguous) and the 20th Century style business plans will be obsolete before implementation begins. We will help you prepare, act and respond to this new order – we can even fast track your team’s learning just when they need it.<</div></div>
<div class="hoverWrapper2">
<button class="circle" style="position:absolute; top: 27%;right: 30%; color:#00fcff;font-size: 120%;">Employees</button>
<div id="hoverShow2" class="absolute">block B</div></div>
<div class="hoverWrapper3">
<button class="circle" style="position:absolute; top:27%;right: 95%; color:#00fcff;font-size: 120%;">Customers</button>
<div id="hoverShow3" class="absolute">block C</div></div>
<div class="hoverWrapper4">
<button class="circle" style="position:absolute; top: 55%;right: 30%; color:#00fcff;font-size: 120%;">Business Model</button>
<div id="hoverShow4" class="absolute">block D</div></div>
<div class="hoverWrapper5">
<button class="circle" style="position:absolute; top: 55%;right: 95%; color:#00fcff;font-size: 120%;">Markets</button>
<div id="hoverShow5" class="absolute">block E</div></div>
<div class="hoverWrapper6">
<button class="circle" style="position:absolute; top: 75%;right: 63%; color:#00fcff;font-size: 120%;">Change</button>
<div id="hoverShow6" class="absolute">block F</div></div>
https://jsfiddle.net/luxs_/axshfe1z/3/

How to I make front and back button stick to both sides

I am have trouble on making two buttons to stick to both sides.
Here is the css file
#projects h2{
color:#374054;
margin-bottom:10px;
}
#projects{
background-color:#f9f8fd;
padding:10px 10px;
border-bottom:1px solid #dcd9d9;
text-align:center;
}
.projects {
position: relative;
}
.slider {
max-width: 100%;
height: 500px;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-scroll-snap-type: x mandatory;
position: relative;
}
[aria-label="projects"]:focus {
outline: 4px solid DodgerBlue;
outline-offset: -3px;
}
[aria-label="projects"] ul {
display: flex;
}
[aria-label="projects"] li {
list-style: none;
flex: 0 0 100%;
padding: 2rem;
height: 60vh;
scroll-snap-align: center;
scroll-snap-stop: always;
}
[aria-label="projects"] figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
[aria-label="projects"] img {
max-height: calc(100% - 2rem);
max-width: 100%;
margin-top: 2rem;
}
#instructions {
position: relative;
}
#instructions p {
padding: 1rem;
text-align: center;
color: #fefefe;
background-color: #111;
}
#focus, #hover, #hover-and-focus, #touch {
display: none;
}
[aria-label="projects"]:hover:focus + #instructions #hover-and-focus {
display: block;
}
#instructions svg {
height: 1.5rem;
width: 1.5rem;
fill: #fff;
vertical-align: -0.5rem;
}
.touch #instructions p {
display: none !important;
}
.touch #instructions #touch {
display: block !important;
}
[aria-label="projects controls"] li {
list-style: none;
}
[aria-label="projects controls"] button {
/* position:absolute; */
top: 0;
background: #111;
color: #fff;
border: 2px solid #111;
border-radius: 0;
width: 3rem;
height: calc(60vh + 4px);
}
#previous {
left: 0;
}
#next {
right: 0;
}
button svg {
width: 2rem;
height: 2rem;
}
here is html file
<div id="projects">
<h2 class="heading">Projects</h2>
<svg style="display:none">
<symbol id="arrow-left" viewBox="0 0 10 10">
<path fill="currentColor" d="m9 4h-4v-2l-4 3 4 3v-2h4z"/>
</symbol>
<symbol id="arrow-right" viewBox="0 0 10 10">
<path fill="currentColor" d="m1 4h4v-2l4 3-4 3v-2h-4z"/>
</symbol>
</svg>
<div class="projects">
<div class="slider" aria-describedby="instructions" role="region" aria-label="projects">
<ul>
<li>
<figure>
<img src="images/1.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/2.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/3.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/4.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/5.jpg">
</figure>
</li>
</ul>
</div>
<div id="instructions">
<p id="hover-and-focus">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
</p>
</div>
</div>
</div>
Here is the js file
const projects = document.querySelector('[aria-label="projects"]')
const slides = projects.querySelectorAll('li')
const instructions = document.getElementById('instructions')
const observerSettings = {
root: projects,
rootMargin: '-10px'
}
if ('IntersectionObserver' in window) {
const callback = (slides, observer) => {
Array.prototype.forEach.call(slides, function(entry) {
entry.target.classList.remove('visible')
if (!entry.intersectionRatio > 0) {
return
}
let img = entry.target.querySelector('img')
if (img.dataset.src) {
img.setAttribute('src', img.dataset.src)
img.removeAttribute('data-src')
}
entry.target.classList.add('visible')
})
}
const observer = new IntersectionObserver(callback, observerSettings)
Array.prototype.forEach.call(slides, t => observer.observe(t))
const controls = document.createElement('ul')
controls.setAttribute('aria-label', 'projects controls')
controls.innerHTML = `
<li>
<button id="previous" aria-label="previous">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
</button>
</li>
<li>
<button id="next" aria-label="next">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
</button>
</li>
`
instructions.parentNode.insertBefore(controls, instructions.nextElementSibling)
instructions.parentNode.style.padding = '0 3rem'
function scrollIt (slideToShow) {
let scrollPos = Array.prototype.indexOf.call(slides, slideToShow) * (projects.scrollWidth / slides.length)
projects.scrollLeft = scrollPos
}
function showSlide (dir, slides) {
let visible = document.querySelectorAll('[aria-label="projects"] .visible')
let i = dir === 'previous' ? 0 : 1
if (visible.length > 1) {
scrollIt(visible[i])
} else {
let newSlide = i === 0 ? visible[0].previousElementSibling : visible[0].nextElementSibling
if (newSlide) {
scrollIt(newSlide)
}
}
}
controls.addEventListener('click', function (e) {
showSlide(e.target.closest('button').id, slides)
})
} else {
Array.prototype.forEach.call(slides, function (s) {
let img = s.querySelector('img')
img.setAttribute('src', img.getAttribute('data-src'))
})
}
I want to make a slide picture show with control buttons to control left and right. However, both buttons were put right below the image and align at the center with left button at the top and right button at bottom. I don't know how to solve this.
you place the buttons inside the slider wrapper the left before the ul of images and right after and you use position absolute
#projects h2{
color:#374054;
margin-bottom:10px;
}
#projects{
background-color:#f9f8fd;
padding:10px 10px;
border-bottom:1px solid #dcd9d9;
text-align:center;
}
.projects {
position: relative;
}
.slider {
max-width: 100%;
height: 500px;
display: flex;
overflow-x: scroll;
scroll-snap-type: x mandatory;
-webkit-scroll-snap-type: x mandatory;
position: relative;
}
[aria-label="projects"]:focus {
outline: 4px solid DodgerBlue;
outline-offset: -3px;
}
[aria-label="projects"] ul {
display: flex;
}
[aria-label="projects"] li {
list-style: none;
flex: 0 0 100%;
padding: 2rem;
height: 60vh;
scroll-snap-align: center;
scroll-snap-stop: always;
}
[aria-label="projects"] figure {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
[aria-label="projects"] img {
max-height: calc(100% - 2rem);
max-width: 100%;
margin-top: 2rem;
}
#instructions {
position: relative;
}
#instructions p {
padding: 1rem;
text-align: center;
color: #fefefe;
background-color: #111;
}
#focus, #hover, #hover-and-focus, #touch {
display: none;
}
[aria-label="projects"]:hover:focus + #instructions #hover-and-focus {
display: block;
}
#instructions svg {
height: 1.5rem;
width: 1.5rem;
fill: #fff;
vertical-align: -0.5rem;
}
.touch #instructions p {
display: none !important;
}
.touch #instructions #touch {
display: block !important;
}
[aria-label="projects controls"] li {
list-style: none;
}
[aria-label="projects controls"] button {
/* position:absolute; */
top: 0;
background: #111;
color: #fff;
border: 2px solid #111;
border-radius: 0;
width: 3rem;
height: calc(60vh + 4px);
}
#previous {
position:absolute;
left: 0;
}
#next {
position:absolute;
right: 0;
}
button svg {
width: 2rem;
height: 2rem;
}
here is html file
<div id="projects">
<h2 class="heading">Projects</h2>
<svg style="display:none">
<symbol id="arrow-left" viewBox="0 0 10 10">
<path fill="currentColor" d="m9 4h-4v-2l-4 3 4 3v-2h4z"/>
</symbol>
<symbol id="arrow-right" viewBox="0 0 10 10">
<path fill="currentColor" d="m1 4h4v-2l4 3-4 3v-2h-4z"/>
</symbol>
</svg>
<div class="projects">
<div class="slider" aria-describedby="instructions" role="region" aria-label="projects">
<li>
<button id="previous" aria-label="previous">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
</button>
</li>
<ul>
<li>
<figure>
<img src="images/1.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/2.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/3.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/4.jpg">
</figure>
</li>
<li>
<figure>
<img src="images/5.jpg">
</figure>
</li>
</ul>
<li>
<button id="next" aria-label="next">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
</button>
</li>
</div>
<div id="instructions">
<p id="hover-and-focus">
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-left"></use></svg>
<svg aria-hidden="true" focusable="false"><use xlink:href="#arrow-right"/></svg>
</p>
</div>
</div>
</div>
`

Placing an SVG instead of a PNG in front of the iframe

I have been trying to figure out how to place an SVG play button instead of a png, but I can't seem to figure it out. That's basically all I'm trying to do here. I've been trying different things but nothing has been working.
All help would be greatly appreciated.
https://jsfiddle.net/f6gvesLx/
Play SVG
<svg width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path></svg>
Below is the code format I'm using:
<style>
html, body {
height: 100%;
background: #000;
color: #fff;
padding: 0;
margin: 0;
}
.outer {
display: table;
height: 100%;
margin: 0 auto;
width: 100%;
}
.tcell {
display: table-cell;
vertical-align: middle;
}
.wrap {
max-width: 400px;
position: relative;
margin: auto;
border: 0px solid #5CB378;
}
.inner {
position: relative;
height: 0;
padding-bottom: 100%;
cursor: pointer;
background-color: black;
}
#thevideo, .image {
position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
height: 100%;
width: 100%;
background-color: #000000;
cursor: pointer;
overflow: hidden;
}
#thevideo iframe {
width: 100%;
height: 100%;
border: 0px;
}
.image {
background: url('http://via.placeholder.com/400x400');
background-size: cover;
border-radius: 50px;
}
.image:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-image: url(https://i.imgur.com/WSlJUPf.png);
background-repeat: no-repeat;
background-size: 24.5% Auto;
background-position: 50% 50%;
}
<div class='outer'>
<div class='tcell'>
<div class='wrap'>
<div class='inner'>
<div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');"> </div>
<div id='thevideo' style='display: none;'>
<iframe frameborder='0'id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe></div>
</div>
</div>
</div>
</div>
You are on the right path:
Remove the background image code from your css.
Then place your svg into your div that has the image class.
Then give the svg the image class as well.
Please refer to this JSFiddle that I forked: https://jsfiddle.net/0xehdwe7/
<div class='outer'>
<div class='tcell'>
<div class='wrap'>
<div class='inner'>
<div class='image' onclick="thevid=document.getElementById('thevideo');
thevid.style.display='block'; this.style.display='none';
document.getElementById('iframe').src =
document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');">
<svg class="image" width="100" height="100" version="1.1" viewBox="-1 0 67 66">
<path d="M32.8,0.5C14.8,0.5,0.1,15.1,0.1,33.2c0,18.1,14.6,32.7,32.7,32.7c18.1,0,32.7-14.6,32.7-32.7 C65.5,15.1,50.9,0.5,32.8,0.5z " fill="orange"></path>
<path d="M32.8,62.2c-16,0-29-13-29-29c0-16,13-29,29-29c16,0,29,13,29,29C61.8,49.2,48.8,62.2,32.8,62.2z" fill="black"></path>
<path d="M46.2,31.9C44.7,31,27,19,26.1,18.4c-1.1-0.6-2.1,0.2-2.1,1.3v27c0,1.2,1.2,1.8,2.1,1.3c1.2-0.7,19.1-12.8,20.1-13.5 C47.1,33.9,47.1,32.5,46.2,31.9z" fill="blue"></path>
</svg>
</div>
<div id='thevideo' style='display: none;'>
<iframe frameborder='0' id='iframe' src='https://www.youtube.com/embed/_0ZCVrg6Kzs?rel=0&keyboard=1&disablekb=1&vq=medium&showinfo=0&controls=1&autoplay=0&iv_load_policy=3&fs=0&wmode=transparent'></iframe>
</div>
</div>
</div>
</div>
</div>

Categories