I'm trying to deactivate the minute bar on an iframe where a link to a vimeo video is inserted.
This is the CSS I put, but it doesnt work. If I change it in the browser console then it works.
<iframe src="https://player.vimeo.com/video/4766864944" width="640" height="480" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>
CSS
.player .vp-controls .play-bar {
display: none;
}
You can not do it with CSS but you can pass right query parameter to src prop. In your case it will be controls=0
<iframe src="https://player.vimeo.com/video/4766864944?controls=0" width="640" height="480" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" data-ready="true"></iframe>
For more information you can check this link
Related
How to make height settings from the embed link for video background under the header, such as this website: https://www.videvo.net/, I own embed link video that is very responsive, and the change height in this link:<div style="width:100%;height:0px;position:relative;padding-bottom:56.250%;"><iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;"></iframe></div>
Welcome to Stack Overflow!
Remove padding-bottom and set the height and you should be good to go!
<div style="width:100%;height:100px;position:relative;">
<iframe src="https://streamable.com/e/c1tb1o?autoplay=1&nocontrols=1" frameborder="0" width="100%" height="100%" allowfullscreen allow="autoplay" style="width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;">
</iframe>
</div>
i am using iframe but fullscreen button is not working.
i have check inspect element i am getting below
<iframe frameborder="0" scrolling="auto" src="https://videos.xyz" allowfullscreen></iframe>
<iframe id="kaltura_player" src= “https://videos.xyz” width="100%" height="100%" allowfullscreen webkitallowfullscreen mozallowfullscreen allow="autoplay *; fullscreen *; encrypted-media *" sandbox="allow-forms allow-same-origin allow-scripts allow-top-navigation allow-pointer-lock allow-popups allow-modals allow-orientation-lock allow-popups-to-escape-sandbox allow-presentation allow-top-navigation-by-user-activation" frameborder="0" title="Kaltura Player"></iframe>
any solution to enable fullscreen
To enable fullscreen on an <iframe>, use allow="fullscreen"
<iframe allow="fullscreen"></iframe>
The allowfullscreen attribute is now considered as a legacy attribute and it's now redefined as allow="fullscreen".
IFrame Documentation
I have a problem with one WordPress theme.
This is URL of my site and if you scroll down to the iFB section
then you will see a video there.
I have entered this code to put it to this page
<iframe
src="https://www.youtube.com/embed/KO2hFoKDh18"
width="560"
height="315"
frameborder="0"
align="middle"
allowfullscreen="allowfullscreen"
></iframe>
but still going left.
Anyone that can help me?
<iframe src="https://www.youtube.com/embed/KO2hFoKDh18" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
element.style {
margin-left: 400px;
}
if you want to align your data than you can align it many ways. align center was not working do you to inheritance so you could it with css. make a class here style. so in script tag you can give margin-left so it will move towards right adjust as you need.
.style {
margin-left: 400px;
}
</style>
<iframe class="style" src="https://www.youtube.com/embed/KO2hFoKDh18" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
I wish to hide a video behind a border and appreciate any help I can get. This is what I have now with the image above the border.
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;">
<iframe width="550" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
try this give iframe width 100% and wrap it inside div like this
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;">
<iframe width="100%" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
add to div style:
style="position:relative;overflow:hidden;width:550px;height:315;"
I don't think what you try to do is allowed by youtube.
but you can just say this on the iframe:
style="visibility=hidden;"
Although it violates the Youtube Terms of Service, just to answer how to do it for the sake of knowledge
This will be your HTML
<div style="padding:20px;background-color:#000000;border:15px outset #b9b9b9;font-family:courier;" class="yt-vid">
<iframe width="550" height="315" src="//www.youtube.com/embed/S_UTUXDs-tE?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
in your CSS
.yt-vid > iframe {
position: relative;
z-index: -1;
}
I do not encourage you to do this. You should not do this actually.
You can use style="visibility: hidden;" css tag in iframe. Or just give 0 (zero) width to iframe.
Hers is the url: http://greyhawkfilms.com/whatwedo.html
It plays fine on the iPhone, but when I try to play it on the iPad only the audio plays and no video.
The embed code I'm using is here:
<iframe id="iframe1" src="http://player.vimeo.com/video/57884624" width="768px" height="432px" frameborder="10px" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
This problem seems to be caused by hiding the Vimeo player. I see that you do this in your code:
<div id="about-1-VP" style="display: none;">
<div class="videoplayer">
<div class="closevp"><span class="closevpbutton">(x) CLOSE</span>
</div>
<iframe id="iframe1" src="http://player.vimeo.com/video/57884624" width="768" height="432" frameborder="10" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>4
To avoid this issue, try using another method to hide the iframe element instead of display:none, for example attaching a class that positions the element off-screen, eg
.special-hide
{
position: absolute;
left:-99999px;
}
Then remove the class when it's time to display the Vimeo player.