Creating transparent svg element with background image - javascript

I am trying to implement upload container similar to this tutorial. I have a svg element, which represents an icon and image as background. I don't know how to achieve this result and make svg element transparent:
figure {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #fff;
display: block;
padding: 20px;
margin: 0 auto 0px;
position: relative;
top: 50px;
}
svg {
width: 100%;
height: 100%;
}
.upload-image-drop {
background: url('http://via.placeholder.com/200x200');
width: 200px;
height: 200px;
border-width: 1px;
border-color: rgb(102, 102, 102);
border-style: solid;
border-radius: 5px;
}
<div class="upload-image-drop" aria-disabled="false" style="height: 200px; border-style: none; border-radius: 0px;">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
</svg>
</figure>
</div>
jsfiddle

It look in this tutorial he's painting the icon with this property . fill:#fff; so..:
svg {
width: 100%;
height: 100%;
fill:rgb(102, 102, 102);
}

Related

CSS hide/react multiple dev element on checked

I have a toggle switch through using input and hiding the checkbox. However, I couldn't hide a div element with svg as it's content, also tried appending the class to name to the svg it self but nothing happened.
Basically I'm trying to have an icon in the toggle switch that changes depending on on checkbox status. I tried doing it all in css here How to set custom stroke color when using svg background-image but I couldn't change the stroke so I'm doing that now
https://codepen.io/jam2020/pen/MWVVwvb?editors=1100
Any ideas, Thanks
$width: 80px;
$height: 44px;
$border-radius: 50px;
$circle-size: $height - 4px;
$icon-size: $circle-size - 2px;
$neutral: red;
$secondary: white;
$base-100: white;
$base-200: gray;
$base-300: black;
$base-content: white;
.ThemeToggler {
width: $width;
height: $height;
flex-shrink: 0;
border-radius: $border-radius;
background-color: $neutral;
border: 1px solid $base-100;
display: inline-block;
cursor: pointer;
&:hover {
border-color: $secondary;
}
}
.ThemeTogglerFill {
position: relative;
&:before {
content: "";
position: absolute;
top: 1px;
left: 1px;
height: $circle-size;
width: $circle-size;
background: $base-300;
box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: $border-radius;
transition: background-color 0.25s, transform 0.25s;
}
}
.ThemeTogglerInput {
display: none;
&:checked~.ThemeTogglerFill::before {
transform: translateX($circle-size);
}
&:checked~.SunIcon {
display: none;
}
}
#mixin icon {
position: relative;
display: block;
width: $icon-size;
height: $icon-size;
border-radius: 50%;
overflow: hidden;
fill: $base-content;
}
.SunIcon {
#include icon;
top: 1.8px;
left: 1.7px;
}
.MoonIcon {
#include icon;
top: -35px;
left: $circle-size + 2px;
}
<label class="ThemeToggler" for="ThemeTogglerID">
<input id="ThemeTogglerID" class="ThemeTogglerInput" type="checkbox" data-toggle-theme="dark,light" data-act-class="ACTIVECLASS" checked />
<div class="ThemeTogglerFill" >
<div class="SunIcon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" >
<path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z" />
<path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z" />
<path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z" />
<path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z" />
<path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z" />
<path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z" />
<path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z" />
<path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z" />
<path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z" />
</svg>
</div>
<div class="MoonIcon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z" />
</svg>
</div>
</div>
</label>
Modify your scss code like this. Make use of visibility property.
$width: 80px;
$height: 44px;
$border-radius: 50px;
$circle-size: $height - 4px;
$icon-size: $circle-size - 2px;
$neutral: red;
$secondary: white;
$base-100: white;
$base-200: gray;
$base-300: black;
$base-content: white;
.ThemeToggler {
width: $width;
height: $height;
flex-shrink: 0;
border-radius: $border-radius;
background-color: $neutral;
border: 1px solid $base-100;
display: inline-block;
cursor: pointer;
&:hover {
border-color: $secondary;
}
}
.ThemeTogglerFill {
position: relative;
&:before {
content: "";
position: absolute;
top: 1px;
left: 1px;
height: $circle-size;
width: $circle-size;
background: $base-300;
box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: $border-radius;
transition: background-color 0.25s, transform 0.25s;
}
}
.ThemeTogglerInput {
display: none;
&:checked ~ .ThemeTogglerFill::before {
transform: translateX($circle-size);
}
& + .ThemeTogglerFill{
.MoonIcon{
visibility:hidden;
}
.SunIcon {
visibility: visible;
}
}
&:checked + .ThemeTogglerFill {
.SunIcon {
visibility: hidden;
}
.MoonIcon{
visibility:visible;
}
}
}
#mixin icon {
position: relative;
display: block;
width: $icon-size;
height: $icon-size;
border-radius: 50%;
overflow: hidden;
fill: $base-content;
}
.SunIcon {
#include icon;
top: 1.8px;
left: 1.7px;
}
.MoonIcon {
#include icon;
top: -35px;
left: $circle-size + 2px;
}
You can also check the implementation here https://codepen.io/abhay07/pen/QWmmjqq?editors=1100

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

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 :/.

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/

Why the SVG is not rendered correctly?

I have a little script, that creates a line digram. The output is a SVG that is added to a div element. The problem is that the SVG is not displayed. If i copy the SVG and paste it to JS Fiddle it is displayed correctly.
The index.html looks like this:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 14px;
height: 100vH;
}
</style>
</head>
<body>
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;"></div>
<script src="app.bundle.js"></script>
<script>
let a = new LiveLineAnno.default(
document.getElementById("app"),
[
{ x: 0, y: 0 },
{ x: 5, y: 40 },
{ x: 20, y: 30 },
{ x: 30, y: 80 },
{ x: 100, y: 0 }
]
);
</script>
</body>
</html>
The output after the script is done:
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;">
<div style="width: 100%; height: 100%; position: relative;"><svg width="500" height="300"
style="fill: none; stroke: rgb(170, 221, 255); width: 500px; height: 300px; stroke-width: 2px; display: block; border-left: 1px solid black; border-bottom: 1px solid black;">
<path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"></path>
</svg>
<div
style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;">
<div data-value="0">0</div>
<div data-value="25">25</div>
<div data-value="50">50</div>
<div data-value="75">75</div>
<div data-value="100">100</div>
</div>
<div
style="position: absolute; top: 0px; left: -40px; width: 40px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;">
<div data-value="80">80</div>
<div data-value="60">60</div>
<div data-value="40">40</div>
<div data-value="20">20</div>
<div data-value="0">0</div>
</div>
</div>
This is the output.
And here the Fiddle:
<div id="app" style="position:absolute;left:50px;width:500px;height:300px;"><div style="width: 100%; height: 100%; position: relative;"><svg width="500" height="300" style="fill: none; stroke: rgb(170, 221, 255); width: 500px; height: 300px; stroke-width: 2px; display: block; border-left: 1px solid black; border-bottom: 1px solid black;"><path d="M0 300 L25 150 L100 187.5 L150 0 L500 300"></path></svg><div style="position: absolute; bottom: -40px; height: 40px; left: 0px; right: 0px; display: flex; justify-content: space-between;"><div data-value="0">0</div><div data-value="25">25</div><div data-value="50">50</div><div data-value="75">75</div><div data-value="100">100</div></div><div style="position: absolute; top: 0px; left: -40px; width: 40px; bottom: 0px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end;"><div data-value="80">80</div><div data-value="60">60</div><div data-value="40">40</div><div data-value="20">20</div><div data-value="0">0</div></div></div></div>
Why the SVG is not displayed?
Ok, the problem was that I used the wrong createElement function.
I used
let svg = document.createElement("svg");
but the correct way is
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");

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