How would I embed a responsive playable youtube video into this tv? (Preferably not on autoplay).
I'm having a hard time with this and was wondering if anyone can help. Thank you.
.tv {
position: absolute;
left: calc(50% - 550px/2);
top: calc(50% - 380px/2);
}
.tv img {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 550px;
}
.video {
position: absolute;
top: 25px;
left: 20px;
}
.b {
width: 400px;
height: 300px;
background: black;
}
<div class="tv">
<img src="http://honeypotmarketing.com/wp-content/uploads/OLD-SCHOOL-TV.png" alt="" />
<!-- broken video -->
<div class="video">
<video class="b" src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" autoplay></video>
</div>
</div>
For responsiveness you need to add css for div heigh:auto and width in % not pixels, like:
style="max-width:100%;height:auto;"
Hope it works.
Thanks :)
Related
.FirstBox {
margin-top: 0;
margin-left: 100px;
margin-bottom: 78px;
height: 60px
}
#BgVideo {
position: absolute;
top: 0;
left: -150px;
top: -650px;
z-index: -100;
}
<div class="FirstBox">
<h1 id="h1">Our secrets</h1>
<div id="BgVideo">
<video playsinline autoplay muted loop width="1640px" height="2060px" src="https://www.w3schools.com/tags/movie.mp4"></video>
</div>
</div>
i tried overflow: hidden; in firstbox class and bgvideo too but didnt work.
i wanna video just be in first box.
video height is 964px.
.FirstBox {
height: 160px;
overflow: hidden;
max-width: 100%;
/* make absolute positioning relative to this div */
position: relative;
}
#BgVideo {
/* calculating height based on the 100% of viewport width and the aspect ratio. */
width: 100vw;
height: calc(9 / 16 * 100vw);
/* center video using absolute positioning */
position: absolute;
top: 0;
left: 0;
/* place the video tag under everything inside .FirstBox div */
z-index: -1;
}
<div class="FirstBox">
<h1>Our secrets</h1>
<video id="BgVideo" autoplay muted> <!-- use the video tag properly with a source tag -->
<source src="https://www.w3schools.com/tags/movie.mp4">
</video>
</div>
I wrote a small code that plays a video with a logo. The logo should appear on the video and it works just fine until the video goes full-screen -- the logo doesn't show up.
Here's my code
.video {
position: relative;
display: inline-block;
width: 600px;
max-width: 60%;
background-color: #000;
}
.video video {
width: 100%;
object-fit: contain;
object-position: 50% 50%;
}
.video .watermark {
position: absolute;
width: 15%;
height: 15%;
top: 5px;
left: 5px;
z-index: 999;
}
.video .watermark img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: 0 0;
}
#goFullScreen {
background: #fff;
font-size: 15px;
padding: 10px;
display: inline;
cursor: pointer;
}
.fullscreen #goFullScreen {
display: none;
}
.video .exit {
position: absolute;
top: 10px;
right: 10px;
font-size: 13px;
color: #fff;
display: none;
}
.fullscreen .exit {
display: block
}
<div class="video">
<div class="watermark">
<img draggable="false" src="https://www.jing.fm/clipimg/full/82-824068_aperture-science-logo-png.png">
</div>
<video id="video" controlsList="nodownload nocaptions" controls="" preload="metadata">
<source src="https://thepaciellogroup.github.io/AT-browser-tests/video/ElephantsDream.mp4" type="video/mp4">
</video>
</div>
How can I make the logo appear even the video goes full-screen?
When the Video player goes full screen the HTML/Java has less control of this new object.
To save all this trouble with HTML/Java I would just 'bake' your logo into the video itself. That way it cannot be removed either be editing browser code. You can do this with many free video editors. I would recommend checking out Davinci Resolve
Davinci is way more powerful than you need but it is free for commercial use and may open up some other doors if you have some more content ideas.
Look up some tutorials on watermarks in Davinci. There are a bunch of ways to do it. If you choose to go this route you will have to re-render your video with the water mark in it.
Good Luck!
You can use videojs library watermark plugin: https://github.com/xbgmsharp/videojs-watermark
I'm creating an earth surrounded by circular graph. The earth is created by using an iframe. I have created a graph and put it inside a dive and managed to overlay the earth on it. It appears fine on desktop but when i open it on phone or tablet, the size of graph behind reduces with screen but the size of earth remains same.
Live URL: https://netzero.co.in/calculator/
I want the earth to adapt screen size i.e make it always look inside the circle graph.
Code:
<style>
.main_content {
width: auto;
height: auto;
position: relative;
}
.earth2{
border-radius:50%;
}
.overlay-effect {
position: absolute;
width: 100%;
height: 100%;
border-radius:50%;
clip-path: circle(160px at center);
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
}
.earth {
width:400px;
height:400px;
border-radius:50%;
left: 50%;
top:50%;
margin-left: -200px;
margin-top: -200px;
padding: 0px;
position: absolute;
clip-path: circle(160px at center);
}
</style>
<div class="main_content">
<div class="graph" id="canvas-holder" style="width:100%">
<canvas id="chart-area" width="500" height="500"></canvas>
</div>
<div class="earth">
<iframe class="earth2" src="https://solarsystem.nasa.gov/gltf_embed/2393" width="400px" height="400px" frameborder="0" >
</iframe>
</div>
<div style="opacity:0%;background-color: rgba(255,0,0,0.5);" class="overlay-effect" id="red-overlay">
hi
</div>
I am trying to set a video over another one by using the css property by making the video position relevant to another one.
As you see in the pic I am trying to position the small video in the right corner. However the position of the small screen changes whenever I change the browser screen. For example it changes when I see the website in a bigger screen.
Can you please help me.
<div class="containerdiv">
<video class="own large" id="myvideo" autoplay="true" muted="true"></video>
<video class="own small" autoplay="true" muted="true"></video>
<video class="peer large" autoplay="true"></video>
<video class="peer small" autoplay="true"></video>
</div>
.containerdiv{
position: relative; right: 0; top: 0; left: 0
}
.own.large{
position: relative; top: 0; right: 0%;
width: 40%;
height:50%;
}
.own.small{
position: absolute; top: 80%; right: 50.3%;
width: 15%;
height:20%;
}
.peer.large{
position: relative; top: 0; left: 0% ;
width:40%;
height:50%;
}
.peer.small{
position: absolute; top: 77.5%; right: 16.5%;
width:15%;
height:20%;
}
#camOption{
}
#switchPeerCam{
}
</style>
screen # 2
as you see here the small video is fit within the wanted place.
.own.small{
position: absolute; bottom: 0; right: 0;
width: 15%;
height:20%;
}
.peer.small{
position: absolute; bottom: 0; right: 0;
width:15%;
height:20%;
}
If you give your small window position as percentage, it changes when the screen changed.
The webserver was case sensitive it seems, Thank you very much #David and everyone. Website is working perfectly. :D
So I have had to make a website for a bakery for an assignment but some images are not displaying and I have no idea why e.g. my cookies page is perfect by my cakes page is a disaster (this is my first website so the coding in general is terrible) When I view the website locally the images are displayed perfectly. Hosted by www.000webhost.com. Website was built using Dreamweaver.
Any help is greatly appreciated, thank you in advance.
http://beckasbakery.comlu.com/Cookies.html
http://beckasbakery.comlu.com/Cakes.html
COOKIES
#Smartiecookie img {
position: absolute;
left: 487px;
top: 310px;
width: 208px;
height: 149px;
}
#Orangecookie img {
position: absolute;
left: 486px;
top: 519px;
width: 206px;
height: 145px;
}
#Doublechoccookie img {
position: absolute;
width: 210px;
height: 147px;
left: 832px;
top: 314px;
}
#Chocolatecookie img {
position: absolute;
left: 838px;
top: 546px;
width: 207px;
height: 148px;
}
</style>
</head>
<body>
<
<div id="Smartiecookie"><img src="Smartie Cookies.jpg" width="364" height="242" /> </div></p></p></p>
<div id="Orangecookie"><img src="Orange cookie.jpg" width="354" height="242" /> </div>
<div id="Doublechoccookie"><img src="doublechoccookie.jpg" width="364" height="242" /> </div>
<div id="Chocolatecookie"><img src="Chocolate cookie.jpg" width="364" height="242" /> </div>
</body>
</html>
CAKES
#Cake1 img {
position: absolute;
left: 506px;
top: 315px;
width: 208px;
height: 149px;
}
#Cake2 img {
position: absolute;
left: 503px;
top: 554px;
width: 206px;
height: 145px;
}
#Cake3 img {
position: absolute;
width: 210px;
height: 147px;
left: 904px;
top: 339px;
}
#Cake4 img {
position: absolute;
left: 906px;
top: 567px;
width: 207px;
height: 148px;
}
</style>
</head>
<body>
<div id="Cake1"><img src="Cake 1.jpg" width="364" height="242" /> </div></p></p></p>
<div id="Cake2"><img src="Cake 2.jpg" width="354" height="242" /> </div>
<div id="Cake3"><img src="Cake 3.jpg" width="364" height="242" /> </div>
<div id="Cake4"><img src="Cake 4.jpg" width="364" height="242" /> </div>
you have to make sure that you have the image files in the same directory as the .html if you're gonna do it as src="Cake1.png", otherwise, you have to specify the location of the image such as src="img/Cake1.png" or something like that.
Hope that helps
Remove the spaces from the image filenames, "Cake 1.jpg", etc. These are requested as "Cake%201.jpg", where %20 is the space character, but this is likely to be interpreted as %201 (some other character).
Web addresses should not contain spaces, they cause too many problems.