Good afternoon,
I have the following code:
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe id="myVideo" width="560" height="349" src="https://www.youtube.com/embed/hygetkMbUto?autoplay=1&loop=1&playlist=hygetkMbUto" frameborder="0" allowfullscreen></iframe>
</div>
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
And on the header I have the following javascript in order to have the video muted by default:
<script type="text/javascript">
var myVideo = iframe.getElementById('myVideo');
myVideo.mute();
</script>
But it's not working. The video plays with sound.
Does anyone know the reason?
thanks in advance,
sabrina
Related
After applying this code I am getting video over Image but I want to add Image over you-tube with play button on it
In this code when I increase the padding of the div which is (padding: 18px) now video get shorter and background Image comes on back
but I want Video should play on clicking Image , video should play on the full container
<div id="background-video" style="background: url(images/fight-c-diff.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allowfullscreen>
</iframe>
</div>
Please Try This:-
<div id="background-video" style="background: url(https://cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg) top center no-repeat; background-size: cover;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
<a class="play-btn" href="#">Play Button</a>
</div>
Js
jQuery('.play-btn').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery('#background-video').find('iframe').show();
jQuery('#background-video').find('iframe')[0].src += "?autoplay=1";
});
CSS
#background-video { width: 640px; height: 360px; position: relative; }
#background-video iframe { width: 100%; height: 100%; display: none; }
#background-video .play-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; line-height: 0px; background: url(http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png) center center no-repeat; background-size: 120px auto; }
Videojs should solve your problem in the easiest way possible :)
Take a look! https://docs.videojs.com/posterimage
i working on website client demanding when someone comes on video it should autoplay (i did it), when someone click on the video it should open in popup (i did it and working fine). Now he asked me when some click on the video1 and the video in popup should start from the same time as the first video already run like 00:35 sec.
`
this is for video
jQuery(document).ready(function(){
jQuery("#video1").click(function(){
jQuery("#video1 source").clone().prependTo('#video2');
});
jQuery("#video1").click(function(){
jQuery("#video1 source:first-child").remove();
});
jQuery("#video2").on("play",function(){
jQuery("#video1").trigger("pause");
});
});
jQuery(document).ready(function(){
jQuery('#video1').click(function(){
jQuery('#vid_overlay').fadeIn('slow');
});
jQuery('#vid_overlay').hide();
jQuery('#video1').click(function(){
jQuery('#vid_overlay').fadeIn('slow');
});
jQuery('#exit_btn').click(function(){
jQuery('#vid_overlay').fadeOut('slow');
});
jQuery('#video1').click(function(){
this.paused?this.play():this.pause();
});
jQuery('#video1').click(function(){
jQuery("#video2").trigger("play");
});
jQuery('#exit_btn').click(function(){
jQuery("#video2").trigger("pause");
});
jQuery('#exit_btn').click(function(){
jQuery("#video1").trigger("play");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="video1" width="300" controls autoplay loop>
<source id="video_src" src="videos/BIISummitDubai.mp4" type="video/mp4">
</video>
and this for is popup
<div id="vid_overlay">
<div id="video_wrap">
<span id="exit_btn">×</span>
<video id="video2" width="800" controls loop>
</video>
</div>
</div>
The currentTime property sets or returns the current position (in seconds) of the audio/video playback.
When setting this property, the playback will jump to the specified position.
So, you can get the currentTime of the video1 and then set it to video2
Something like this:
video2.currentTime = video1.currentTime;
you can try css only popup so it will play same video in popup with same duration.
<div id="popup1" class="overlay">
<div class="popup">
<a class="close" href="#">×</a>
<a href="#popup1"> <video id="video1" width="300" controls autoplay loop>
<source id="video_src" src="videos/BIISummitDubai.mp4" type="video/mp4">
</video></a>
</div>
</div>
and css
.overlay:target {
visibility: visible;
opacity: 1;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
}
.overlay:target .popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 300px;
position: relative;
}
.popup .close {
position: absolute;
top: 0px;
right: 0px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
display:none;
}
.overlay:target .popup .close{display:inline-block;}
.popup .close:hover {
color: #06D85F;
}
try this fiddle https://jsfiddle.net/5qce80fs/12/
This question already has answers here:
Making an iframe responsive
(24 answers)
Closed 5 years ago.
I am new to coding and community and i am trying to embed YouTube iframes responsively. So far all i do is replacing the original width value with 100%.
<iframe width="100%" height="315" src="https://www.youtube.com/embed/kXBunIe_PSw" frameborder="0" allowfullscreen></iframe>
Yes it makes it responsive since the height is static there are lots of black space. Is there any simple way to prevent this.
I prefer css solutions but javascript is also welcomed.
.videoWrapper {
position:relative;
padding-bottom:56.25%;
margin:auto;
height:0;
}
.videoWrapper iframe {
background-color:#f2f2f2;
position:absolute;
max-width:100%;
max-height:315px;
width:95%;
height:95%;
left:0;
right:0;
margin:auto;
}
<div class='videoWrapper'>
<iframe id='video' class='trailervideo' width='560' height='315' src='https://www.youtube.com/embed/hhR3DwzV2eA' src='about:blank' frameborder='0' allowfullscreen></iframe>
</div>
Let me know, if it does not work
This should help you get started.
Ref: Bootstrap
.responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.responsive iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.video {
padding-bottom: 56.25%; /* or 75% depending upon the type of video you have */
}
<div class="responsive video">
<iframe src="https://www.youtube.com/embed/kXBunIe_PSw" allowfullscreen></iframe>
</div>
I'm trying to cover a video with a div so it's not visible. Then when you hover over the div it's heigth shrinks to let the video controls visible.
I don't know why I get this weird glitch: https://i.gyazo.com/aff58e50903009f7515a9cbd9b045f91.mp4
This is the slice with the video and overlay in question:
<div class="ytsound-cover" ng-class="{'ytsound-cover-lower': hover, 'ytsound-cover': !hover}" ng-mouseenter="hover = true" ng-mouseleave="hover = false" id="cover">
</div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
Style here:
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.ytsound-cover-lower {
background: #fff;
height: 205px;
position: absolute;
width: 301px;
}
Whole thing is loaded inside an ng-view.
But anyway, here is all the source code, I'm hosting it on github:
https://github.com/Vacanor/gifsound
I'd love some pointing towards why that is happening.
PD: I don't know if it does have any effect but I use flexbox
try wrapping these divs by another div just like below-
<div class="main-cover">
<div class="ytsound-cover" id="cover"></div>
<div id="ytsound">
<iframe width="300" height="250" src="//www.youtube.com/embed/TbsBEb1ZxWA?autoplay=1&loop=1&playlist=TbsBEb1ZxWA&showinfo=0&start=65" frameborder="0" allowfullscreen></iframe>
</div>
</div>
make style like-
.main-cover{
position:relative;
height:250px;
width:301px;
}
.ytsound-cover{
background: #fff;
height: 250px;
position: absolute;
width: 301px;
}
.main-cover:hover .ytsound-cover{
height:205px
}
I've created a button in a video and I've added a <div> on the top of that button. But when I try to resize that video I want that button to resize with that video i.e. I want that <div> to cover that button in the video nicely even when I try to resize the video.
UPDATE
The white box is the div--->
This is what happens when i try to resize the video--->
I tried using percentage values in the CSS but still it's not working maybe because of the outer black bars.
UPDATE 2
.start-button {
width: 42%;
height: 19%;
position: absolute;
top: 3%;
left: 5%;
margin: 20% 0 0 24%;
cursor: pointer;
}
HTML Structure
<div class="container">
<video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}">
<source src="sortedd.mp4" type='video/mp4'/>
</video>
<div class="option-panel">
<!-- Starting of the quiz -->
<div class="start-button"></div>
</div>
</div>
Okay this is how I did it:
The HTML Structure
<div class="container">
<video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}" width="100vw" height="56.25vh">
<source src="sortedd.mp4" type='video/mp4'/>
</video>
<div class="play-button"></div>
</div>
The CSS Styling
.play-button
{
background-color: red;
width: 44vw;
height: 9.687vw;
background: red;
max-height: 18vh;
max-width: 77.222vh;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483647;
}
After a lot of hit and trials I somehow managed to make it work. Can anyone please explain me the relation between Maximum values of height and width and the normal height and width.