Embedded vimeo videos will not play on iPad - html

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.

Related

How to hide Vimeo controls bar using CSS

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

Space Below <iframe> in Flask with Bootstrap

I'm trying to embed a podcast into my flask website, and I'd I'm using bootstrap. When I embed using bootstrap. This is the code for the embed:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>
It loads fine and adjusts based on the size of the window, which is what I want, but it also includes a lot of space below the actual content that pushes the rest of the content on my website down.
This is the link I'm embedding.
Is there a way to get rid of the space below the actual content in the ?
Simply add scrolling="no" to disable scrolling like this:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" scrolling="no" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>
You can also set the height property to get rid of all the extra space:
<div class="embed-responsive embed-responsive-1by1" style="display:block;">
<iframe class="embed-responsive-item" scrolling="no" height="100" src="https://anchor.fm/torasimecha/embed/episodes/Braishis---Imperfect-is-Very-Good-ekuhka"
</iframe>
</div>

Can I add words/image over an embedded Vimeo iframe? How?

As title... Can I even do that? If so, how to? I've embedded a Vimeo video but failed to add words on it. Javascript is able to use
Many thanks
A solution with a text with an absolute position:
#video-container{
position:relative;
width:auto;
}
#foreground-text{
position:absolute;
top:50%;width:100%;text-align:center;
margin:0 auto;
color: white;font: bold 20px;
}
<div id="video-container">
<iframe src="https://player.vimeo.com/video/36477715" width="100%" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p>Things Programmers Also Know from Billy Keyes on Vimeo.</p>
<span id="foreground-text">Some text</span>
</div>
(video won't work in the snippet frame)
You can also use WebVTT subtitles:
https://developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video
http://html5doctor.com/video-subtitling-and-webvtt/

Blur overlay over video

I'm trying to put a blurred overlay layer over a video.
I roughly recreated the effect in a jsFiddle:
http://jsfiddle.net/zswcctc7/1/
this is the situation more or less.
<div class="overlay-wrapper">
<div class="video">
<iframe width="560" height="315" src="//www.youtube.com/embed/vdCGnuccRv0?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="overlay"></div>
</div>
So what i would like is instead of the white layer have a blurred layer, iOS style-ish. I tried a lot of things like blurjs, but nothing i find seems to work with video's.

Hide a image behind a border in html, css

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.