I'm having an issue that is specific to Safari on Mac OSX, where setting wmode to transparent is not preventing facebook modal windows, or drop downs from being overlapped by the video. We have tried opaque, transparent, and a handful of other hacks from around the net, but can not seem to resolve the issue in Safari. Can anyone help resolve the issue, or reproduce it?
iframe title="YouTube video player" width="520" height="290" src="http://www.youtube.com/embed/TP790i87rBc?wmode=transparent&rel=0" frameborder="0">
Thanks!
Bob
I recently had the same problem. It looks like YouTube has also changed its embed code from <object> to <iframe>, yet neither of these worked for me. The solution for my project was to just use the <embed> tag.
<embed type="application/x-shockwave-flash" src="' + videoSource + '" width="640" height="390" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" bgcolor="#000000"></embed>
Related
I use videoJS to play a video on a HTML5 webpage. Everything is working well on PC (even with Safari), but on iPad (iOS 5), even if the video is playing well, I've got a problem with the size of the video – it is very small, and I don't know how to make it bigger.
I have tried adding width and height attributes and changing the default width and height in video.js.
Plus, my video is supposed to be 408px width and 520px height, and on iPad it's wider than high and there a black on each side.
How can I resolve this problem?
EDiT
#Emil thank you for your time. There is some codes :
How i include the video on my HTML page :
<video id='videoDavi' class='video-js vjs-default-skin' autoplay='autoplay' width='408' height='520' style='z-index: 1;' data-setup='{}'>
<source src="#DOSSIER_SQUELETTE/video/bub_Intro.<?php echo $extension; ?>" type="<?php echo $type; ?>" />
</video>
The "$extension" and "$type" are meant to choose the right video for the right browser. I used to use the videoJS solution (<video> <source [..]/> <source [...] /> <source [...] /> </video>) but had to change in order to make i-dont-remember-what working.
I also included on my css :
video#videoDAVI_html5_api{ width: 408px; height: 520px; }
Because i saw throught a web inspector simulator that the code on the iPad was
<video id="videoDAVI_html5_api" autoplay src="video.mp4"></video>
(+ i forgot i'm also using easySlider 1.7)
Thanks
I finally had it work on iPad.
I had this code under the <video id="videoDavi"></video>
<script>
var homePlayer=_V_("videoDavi");
</script>
and had the video-js.css (it wasn't needed for the others, i still don't understand why iPad needs it)
Now it's not working at all on Android/Chrome, but working on Android/Firefox.. But I guess I'll find why, didn't have search yet.
I have looked everywhere to an answer to this, and it is all very confusing.
I can not get my videos to play on either an ipad or iphone.
They play on other devices including androids/desktops. I have converted them many times using Miro video converter and handbrake, I have tried reducing the file size. I have tried removing the poster tags. I have come to the conclusion there must be something wrong with my html, which look like this:
<div id="blackbox_2" style="display: none">
<video title="BlackBox Sessions Part 2" class="video" preload="auto" controls>
<source src="videos/BlackBoxPt.2 copy.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="videos/BlackBoxPt.2.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="videos/BlackBoxPt.2.ogv" type='video/ogg; codecs="theora, vorbis"'>
<object width="640" height="360" type="application/x-shockwave-flash"
data="flowplayer-5">
<param name="movie" value="flowplayer-5" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "http://kimcolemanprojects.com/videos/BlackBoxPt.2.appleuniversal.mp4", "autoPlay":false, "autoBuffering":true}}' />
</object>
</video> </div>
This html I got from dive into html. On the iPad/iphone you can see the video play button in the middle, however when you click on it nothing happens.
The page with the videos is here http://kimcolemanprojects.com/video-lighting.html
I have several videos on this page that are display in a fancy box.
If anybody can help guide me in the right direction I would be very grateful, this problem I'am finding very irritating.
Thanks
Angela
I decided the easiest option to this problem was to stream all my videos through youtube and vimeo. That way they work on everything.
I am using videolightbox to play videos on my site. It works (on all platforms) on the homepage where the video pops up in an overlay. To do that I use:
<a href="videos/player.swf?url=videos/filename.mp4">
on page2 (see: http://daretogaincontrol.com/page2?title=Having%20Fun)
I use an iframe tag like so:
<iframe src="videos/player.swf?url=videos/filename.mp4">
And that doesn't work. I'm not sure it's the iframe, but I've been around several circles trying to figure out why the videos don't play on iPad and iPhone (see Videos don't play on iPad/iPhone).
Works on all other platforms. Thanks for help.
Looks to me that your code is using an '.swf' file to play the .mp4 video.
Apple products do not facilitate the use of flash (.swf) objects.
You can bypass this by using something like the following code;
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="340" height="280" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="SRC" value="video.mp4">
<param name="AUTOPLAY" value="false">
<param name="CONTROLLER" value="false">
<embed src="video.mp4" width="340" height="260" autoplay="false" controller="false" pluginspage="http://www.apple.com/quicktime/download/">+
</object>
Hope this helps mate.
I am developing a facebook application to show some flv videos.videos are shown but, the preview img does not appear this is my code:
<fb:flv src='http://mobimediaworld.com/flv/3.flv' width='180' height='150' title='Mekawy' color='#FFBB00' salign='r' img='http://www.gcmob.com/Images/Media/PreviewFrame/27.png' scale='showall'/>
can anybody help me, pleas?
Sorry buddy fb:flv not working anymore dont know why.
use this:
<fb:swf
swfbgcolor="000000"
imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg'
width='340' height='270' />
I have created simple facebook app. I have a profile tab(for facebook pages) where I have embed a youtube video.
<fb:swf swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;" swfsrc='http://www.youtube.com/v/xxxxxxxxxx' imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />
The image appears fine. But onclick It does not play the video.
I appreciate any help.
Thanks.
in order to achieve that you have to correctly replace the swfsrc attribute value with the one of the youtube video you want.
open the youtube video link, click on the embed button and look at the first <param name="movie" value="http://www.youtube.com/v/cNgf6fd88g8?fs=1&hl=en_US"></param> tag. copy that value (without the query string) and paste it on your swfsrc attribute value. that's all. enjoy ;)
<iframe
id="yt"
src="//www.youtube.com/embed/i8h9_2Ph5VY/?wmode=opaque&version=3&theme=dark&width=810&height=456&autoplay=0&rel=0&showinfo=0&iv_load_policy=3&&vq=hd720&hd=1&html5=1&enablejsapi=1&playerapiid=main"
frameborder="0"
scrolling="no"
allowfullscreen="true"
webkitallowfullscreen="true"
mozallowfullscreen="true"
style="width: 810px; height: 456px;">
</iframe>