I want to create a playlist background videos from youtube, i have this
HTML
<div id="video"> <iframe src="//www.youtube.com/embed/Fhy6CHZ9dvY?list=PL82A0C437FEE5F6DA?autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1" www.youtube.com="" embed="" width="100%" height="100%" frameborder="0"></iframe>
</div>
CSS
height: 100%;
width: 100%;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
This code works for one video and stop when the video finish, i want to know any way to play a video after finish the first one automatically, like a playlist.
I tried embeding the playlist from youtube but isn't working.
Add & instead of ? right after the list=PL82A0C437FEE5F6DA.
So the final code should looks like this-
<div id="video">
<iframe src="//www.youtube.com/embed/Fhy6CHZ9dvY?list=PL82A0C437FEE5F6DA&autoplay=1&controls=0&loop=1&rel=0&showinfo=0&autohide=1&wmode=transparent&hd=1" www.youtube.com="" embed="" width="100%" height="100%" frameborder="0"></iframe>
</div>
Related
So I have video thumbnails in a flexbox. How can I change it to display an image when hovered on the video?
I can change video to video, image to image, however am not sure how to change the source from video to image, and as it is in a flexbox I can't hide the image under the video
<video autoplay loop muted src="./video.mp4" type="video/mp4 id="video""
onmouseout="this.src='./video.mp4'"
onmouseover="this.src='./image.png'"> </video>
I also tried jQuery to replace the whole video source block, but I don't think I got it right
$("#video").mouseover( function () {
var $image = $("img").attr('src', './image.png');
$(this).replaceWith($image );
});
https://codepen.io/saltykiam/pen/abmGbWK
edit: how can i make an image overlay on a video
Here is the basic idea of how you can add the image into the overlay and show once someone hove the video, I hope you looking for the same
.videoWraper{
position:relative;
display:block;
}
.img-overlay {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
opacity:0;
}
video#video {
width: 100%;
}
.videoWraper:hover .img-overlay{
opacity:1;
}
<div class="videoWraper">
<video autoplay loop muted src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" id="video"> </video>
<img class="img-overlay" src="https://picsum.photos/200">
</div>
Like the title states is it possible to use to show 100% of another website on my site? Without any of the contents from my own site showing?
I tried using a code like this,
<iframe src="google.com" frameborder="0" style="overflow:hidden;height:100%;width:100%" height="100%" width="100%"></iframe>
But my own site is still showing up below the contents when it runs out. Please help thanks.
You may try with these css codes.
body {
margin: 0;
padding: 0;
}
iframe {
position: absolute;
width: 100%;
height: 100%;
border: 0;
}
<iframe src="https://www.premierleague.com"></iframe>
I have a video in my Project directory under folder name Video and Video name Sapno.MP4.Now i have to add this Video in my webpage . Currently i have added you tube video in it and it is getting displayed and played properly but now i want to replace it with my local project directory video.
Here is the HTML that i am using..
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;"><iframe width="420" height="315" src="//www.youtube.com/embed/sP4NMoJcFd4" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>
Please help me to get it corrected ..Thanks..
set the SRC attribute to Videos/Sanpo.mp4.
Another option is to use the HTML5 video tag, in which case you will have to use the above source tag anyways.
I'm trying to build a simple responsive site.
For the most part everything is working. But as soon as I start to shrink the site, the YouTube video gets bumped onto the next row. Is there a way to fix this so it stays aligned with the ad to the left?
Here is a link to the demo site:
http://ctrice.ca/test/rwd/
This is the css I'm using.
#ad{ width:100%; max-width:288px; min-height:330px; margin-right:2%; float:left; }
#trailer{ width:100%; max-width:540px; min-height:330px; position:relative; float:left; }
#trailer iframe,
#trailer object,
#trailer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
This is the HTML code:
<div id="ad"><img src="img/ad.jpg" alt="ad" /></div>
<div id="trailer">
<iframe width="460" height="315" src="http://www.youtube.com/embed/C4uOSz1Z9GM" frameborder="0" allowfullscreen></iframe>
</div>
The problem will lie with the iframe. I wish I could remember all the gory details but it's best to get that lesson from an expert by Googling for Scott Jehl and "responsive and responsible" videos and any articles you can find (of which there are many). His specific problem was with ads delivered to the Boston Globe via iframes. Your problem may be that the video is in an iframe.
I know we're not to give answers as "Google for it" but my answer points to the iframe and the many points made by Jiehl are best left to him.
This code seems to work for me. The percentage in CSS is found when you divide the height by the width of your video.
(HTML)
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="315" src="YourVideoURL" frameborder="0" allowfullscreen></iframe>
</div>
(CSS)
`/*/V I D E O * W R A P P E R/*/
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.videoWrapper iframe,
.videoWrapper embed,
.videoWrapper object {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}`
Hope it works for you good luck!
I've seen this question pop up a couple of times without any clear resolution.
I'm loading a simple video
<video src="" controls></video>
Onto my page. The video works and plays well cross-browser (not showing all the format setup for this question since it isn't relevant).
I've then applied a border-radius to the video tag. This works, except in Chrome.
I can even pull up the console and see the border-radius applied to the video tag, but it isn't rendering the border radius.
Is anyone familiar with this issue? I've read it's a bug in Chrome, but I'm not sure if it's been resolved or if there might be a workaround?
I'm not sure but I think that this is what's meant by "using SVG":
The idea is to create a HTML overlay element that is the same width and height as the video, set multiple SVG backgrounds on it (border-radius's in whatever the background color is) and make it "mouse-invisible" (pointer-events: none):
Demo: http://jsfiddle.net/pe3QS/3/
CSS (minus the SVG's):
#video-container {
position: relative;
}
#overlay {
position: absolute;
width: 320px;
height: 240px;
left: 0;
top: 0;
pointer-events: none;
background-image: url('data:image/svg+xml...');
background-position: top right, top left, bottom left, bottom right;
background-repeat: no-repeat;
}
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
<div id="overlay"></div>
</div>
You could also use a psuedo-element (not on the video element, it would'nt display):
Demo: http://jsfiddle.net/pe3QS/2/
CSS:
#video-container:after {
position: absolute;
width: 320px;
height: 240px;
content: " ";
.....
HTML:
<div id="video-container">
<video width="320" height="240" src="http://www.w3schools.com/html/movie.ogg" type="video/ogg" controls></video>
</div>
The SVG's are pretty simple to modify, just change the fill attribute on each of them.
This could probably also be done via JS.