Report Blog Entry
<style>
/*If position is set to relative, there will be a large space underneath the TV if you choose to add text. To solve this, put the content you want in the "contentrelative" div container (see below)*/
.tvrelative {
position: relative;
height: 450px; /*Adjust according to preferences. This adjusts size of the TV to prevent overlap with other content*/
}
.contentrelative {
position: relative;
bottom: 180px; /*Adjust according to preferences. This adjusts alignment of your desired content relative to the TV*/
}
.tv {
position: relative; /*Adjust according to your preferences. Setting it to "fixed" will put it outside your inner blog container*/
background: url('https://i.ibb.co/GHn1MsP/tv-ezgif-com-webp-to-png-converter.png') top left no-repeat;
background-size: 100% 100%;
width: 400px;
height: 400px;
z-index: 2;
pointer-events: none;
}
.iframe {
position: relative; /*Adjust according to your preferences. Setting it to "fixed" will put it outside your inner blog container*/
width: 270px;
height: 203px;
bottom: 325px; /*If position is set to "fixed", adjust to your preferences to align video, TV, and grain pattern*/
left: 58px; /*If position is set to "fixed", adjust to your preferences to align video, TV, and grain pattern*/
z-index: 0;
}
.grain {
position: relative; /*Adjust according to your preferences. Setting it to "fixed" will put it outside your inner blog container*/
background: url('https://i.gifer.com/origin/3e/3ef326d43744e0877c24b8c07542a2e7_w200.gif'), no-repeat; /*You can replace the grain pattern by replacing this image. Or delete this entire section if you don't want any textures*/
width: 270px;
height: 203px;
bottom: 207px; /*If position is set to "fixed", adjust to your preferences to align video, TV, and grain pattern*/
left: 0px; /*If position is set to "fixed", adjust to your preferences to align video, TV, and grain pattern*/
z-index: 1;
opacity: 0.2;
pointer-events: none;
}
/*Blog mobile display*/
@media (max-width: 600px) {
.tvrelative {
position: relative;
height: 350px; /*Adjust according to preferences. This adjusts size of the TV to prevent overlap with other content*/
}
.contentrelative {
position: relative;
bottom: 120px; /*Adjust according to preferences. This adjusts alignment of your desired content relative to the TV*/
}
.tv {
position: relative; /*Adjust according to your preferences. Setting it to "fixed" will put it outside your inner blog container*/
background: url('https://i.ibb.co/GHn1MsP/tv-ezgif-com-webp-to-png-converter.png') top left no-repeat;
background-size: 100% 100%;
width: 300px;
height: 300px;
z-index: 2;
pointer-events: none;
}
.iframe {
position: relative; /*Adjust according to your preferences. Setting it to "fixed" will put it outside your inner blog container*/
width: 185px;
height: 139px;
bottom: 235px; /*If position is set to "fixed", adjust to your preferences to align video, TV, and grain pattern*/
left: 58px; /*If position is set to "fixed", adjust to your preferences to align video, TV, and grain pattern*/
z-index: 0;
}
.grain {
position: relative; /*Adjust according to your preferences. Setting it to "fixed" will put it outside your inner blog container*/
background: url('https://i.gifer.com/origin/3e/3ef326d43744e0877c24b8c07542a2e7_w200.gif'), no-repeat; /*You can replace the grain pattern by replacing this image. Or delete this entire section if you don't want any textures*/
width: 185px;
height: 139px;
bottom: 142px; /*If position is set to "fixed", adjust to your preferences to align video, TV, and grain pattern*/
left: 0px; /*If position is set to "fixed", adjust to your preferences to align video, TV, and grain pattern*/
z-index: 1;
opacity: 0.2;
pointer-events: none;
}
}
</style>
<div class="tvrelative">
<div class="tv"></div>
<div class="iframe">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/D8RBiQUqW1M?si=XsGXAvLP88Xd4-jm" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen=""></iframe>
<div class="grain"></div>
</div>
<div class="contentrelative">
[INSERT CONTENT HERE]
</div>
</div>
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
xXkf100Xx
The video doesn't autoplay for me, but looks pretty nice I guess.
it's not supposed to autoplay. you can look up how to autoplay a youtube video embed if you want it and edit that part.
by oginome; ; Report
oginome
SpaceHey won't let me post layouts for some reason...
there's a separate section for layouts, it's under the top search bar, I bet you could post it there!
by Jon 🐇; ; Report
It's giving me the message "Posting layouts is temporarily unavailable".
by oginome; ; Report
An must be working on it. give it some time and try again (couple days maybe)
by Jon 🐇; ; Report