Youtube object embed ipad - ipad

I've got a youtube video that renders ok using object embed, in all browsers except ipad, here's the code:
<object id="ytViewer" width="468" height="327" type="application/x-shockwave-flash" data="http://www.youtube.com/apiplayer?version=3&enablejsapi=1&version=3&playerapiid=ytViewer" state="0" mute="0">
<param name="allowScriptAccess" value="always">
<param name="autoplay" value="0">
<param name="WMode" value="Opaque">
</object>
I'm using object embed, as I've made some custom player controls in javascript, which don't work when I use an iframe to embed the video.
It uses some javascript to pull the video in, but is it because ipad does'nt support flash embed?
Update:
function loadPlayer( divToLoad, plId, vidid) {
var params = {
allowScriptAccess: "always",
autoplay: 0
};
var atts = {
id: plId
};
// All of the magic handled by SWFObject (http://code.google.com/p/swfobject/)
swfobject.embedSWF("http://www.youtube.com/apiplayer?" + "&enablejsapi=1&version=3&playerapiid=" + plId, divToLoad, "468", "327", "9", null, null, params, atts);
swfobject.createCSS("#" + plId, "display:block");
$('#' + plId + '_container').attr('videoid', vidid);
}
So I need to get the function above to add the embed tag, not sure how to do that.
Thanks

Your code only links to the YT flash video player (not even pointing to a video).
Why not just use the automatically generated "share" code of YouTube?
Look out for the "embed" button in the "share" section right below your video and copy the default code. You can even activate some additional options:
<iframe width="560" height="315" src="http://www.youtube.com/embed/KVHO-FWuMXs" frameborder="0" allowfullscreen></iframe>
This should work for all browsers.
Edit:
if you need the object/param syntax, you can switch to the "old" way of embedding videos: the (currently fourth) option can be ticked to use this deprecated code:
<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/KVHO-FWuMXs?version=3&hl=de_DE"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/KVHO-FWuMXs?version=3&hl=de_DE" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>
Test it with this music video from Psy:
http://www.youtube.com/watch?v=KVHO-FWuMXs

Related

Why are YouTube videos using 'youtube.com/v' not loading

Please review this page.
The embedded video plays when the page is viewed on a mobile device but not when viewed on a computer (tested on two laptops running Windows 8 and 10, on Chrome, FF, and Edge).
This issue only exists with YouTube videos and the problem began 48 hours ago (approx.)
For example, see this YouTube URL (no video is being loaded):
http://www.youtube.com/v/RCsJHHUkisw&rel=0&color1=0x054b81&color2=0xe2e2e2&hd=1&showinfo=0&enablejsapi=1&playerapiid=ytplayer&fs=1
I have managed to handle this problem by rewriting the emvideo module.
I am currently using the module version = "6.x-1.26".
I didn’t take the time to change the entire module;
I changed only the parts I needed:
All the changes were made in this file:
\sites\all\modules\emfield\contrib\emvideo\providers\youtube.inc
In function theme_emvideo_youtube_flash line 444 I changed the line
$url = check_plain("http://www.youtube.com/v/$code&$related$autoplay_value$colors$border$high_quality$display_info$enablejsapi$fs");
to
$url = check_plain("https://www.youtube.com/embed/$code"); .
What I did was to look at the youtube embed code and try to make the link look the same.
Next step was to change the FLASH output, in line 566 function
theme_emvideo_youtube_default_external and change the next content:
<div id="$div_id">
<object type="application/x-shockwave-flash" height="$height" width="$width" data="$url" id="$id">
<param name="movie" value="$url" />
<param name="allowScriptAccess" value="sameDomain"/>
<param name="quality" value="best"/>
<param name="allowFullScreen" value="$fullscreen_value"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="scale" value="noScale"/>
<param name="salign" value="TL"/>
<param name="FlashVars" value="$flashvars" />
<param name="wmode" value="transparent" />
</object>
</div>
To
<div id="$url"><iframe width="$width" height="$width" src="$url" frameborder="0" allowfullscreen></iframe></div>
And that’s all…
Hope it helps a bit…
The following should be pretty close to a drop-in replacement for what's currently being served on the page referenced in the question (the object tag with id emvideo-youtube-flash-2):
<iframe id="ytplayer" type="text/html" width="590" height="499"
src="https://www.youtube.com/embed/Je2vE5RLJ6o?rel=1&showinfo=0&enablejsapi=1&fs=1&origin=http://www.islandcricket.lk/"
frameborder="0" allowfullscreen>
A few things about the implementation currently being served:
Using object tag and the embed URLs of the form youtube.com/v/video id (which only serves a Flash player, not HTML5) to embed YouTube videos has been deprecated for over a year.
the player parameter hd is deprecated. The iFrame player (used in the above code), will automatically chose the best quality to display based on a variety of parameters. If you wish to control this you can use the Javascript API.
the rel, showinfo, enablejsapi and fs parameters should continue to function as they have in the previous implementation (parameter documentaion here)
The allowScriptAcess parameter set to sameDomain in the current implementation is replaced by the origin parameter and should be set to the URL severing the webpage (documented here)
Screenshot of the above code working on islandcricket.lk tested via webdev tools:

Why do the buttons users could click at the end of embedded YT videos not appearing?

Only the subscribe button appears at the end (along with a display of how many likes/dislikes checked direct on YT). Is there an embed code to get these back so users can vote on my site?
Sample embed code:
<object style="height: 360px; width: 640px">
<param name="movie" value="http://www.youtube.com/v/XXXXXXXXXXXXX?version=3&controls=1&autohide=1&modestbranding=1&rel=0&autoplay=1&showinfo=0&showsearch=0&iv_load_policy=3&border=2&color1=0xB24D7E&color2=0xfff0f5&fs=1&hd=0&feature=player_embedded" /><param name="allowscriptaccess" value="always" /><param name="wmode" value="transparent" /><param name="allownetworking" value="internal" /><embed src="http://www.youtube.com/v/XXXXXXXXXXXX?version=3&controls=1&autohide=1&modestbranding=1&rel=0&autoplay=1&showinfo=0&showsearch=0&iv_load_policy=3&border=2&color1=0xB24D7E&color2=0xfff0f5&fs=1&hd=0&feature=player_embedded" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" wmode="transparent" allownetworking="internal" width="640" height="360"></embed></object>
Embedded AS3 player
.If you open http://youtube.googleapis.com/v/_Acr-FWRWXE?autoplay=1,
it's equivalent to AS2 player,
http://youtube.googleapis.com/v/_Acr-FWRWXE?autoplay=1&version=2
However, if you only open http://youtube.googleapis.com/v/_Acr-FWRWXE without parameters(such as autoplay), http://youtube.googleapis.com/v/_Acr-FWRWXE no more version 2, it's version 3 now.
You need version 3(AS3) for display likes/dislikes icon, that's means
http://youtube.googleapis.com/v/_Acr-FWRWXE?version=1234567 or
http://youtube.googleapis.com/v/_Acr-FWRWXE?version=3
You open http://youtube.googleapis.com/v/_Acr-FWRWXE, play at the
end, you copy the embed code, unfortunately the embed code is wrong,
it give you
name="allowScriptAccess" value="always">
src="http://www.youtube.com/v/_Acr-FWRWXE&hl=en_US&feature=player_embedded&version=3"
type="application/x-shockwave-flash" allowfullscreen="true"
allowScriptAccess="always" width="640" height="360">
As you can see, no question mark ? inside
http://www.youtube.com/v/_Acr-FWRWXE&hl=en_US&feature=player_embedded&version=3
, thats means its still version 2, you shoud change to
http://www.youtube.com/v/_Acr-FWRWXE?hl=en_US&feature=player_embedded&version=3
instead.
IFrame embed.
Using www.youtube.com/embed/a6_AHH-A0ks
Hope this help :)

Bootstrap Modal vs Youtube Video z-index Issue

I am using a Twitter Bootstrap Modal and Youtube Video on the same page. I am facing Z-Index Problem where the Video is being displayed above the modal window in Chrome Browser.
How can i solve this issue ?
http://mink7.com/projects/cmrc/home.html
You should use YouTube urls with ?wmode=transparent param.
<iframe src="http://www.youtube.com/embed/EBSnWlpTPSk?wmode=transparent"></iframe>
If you include your object/embed tag then you should add <param name="wmode" value="opaque" /> for object tags, wmode=transparent for embed tags.
The YouTube video you put on your page is flash-based. Flash objects are rendered separately on the top of the window, because they're not the part of HTML5 stack. Z-index has no effect on these.
See e.g. http://www.google.com/search?q=flash+z-index
As suggested by Fatih, solution is to pass wmode=transparent. For the IFrame API, I used following:
var player = new YT.Player(pContainer, {
height: 300,
width: 400,
videoId: contentID,
playerVars : {wmode: "transparent"},
events: {
...
}
}
});
you can easily fix this.
USE:
<param name="wmode" value="opaque" />
inside object tag.
<object title="YouTube video player" width="480" height="390"
data="http://www.youtube.com/embed/EBSnWlpTPSk"
frameborder="0" wmode="Opaque">
<param name="wmode" value="opaque" />
</object>
OBJECT method is now deprecated:
https://developers.google.com/youtube/player_parameters

rails 3 embed video

I'm trying to embed youtube video.
in the videos db table, i have field called "link".This contains the link of the video.
In Controller Videos, there is just empty method def vidlist, since i'm just trying to display single video.
I have vidlist.html.erb:
<blink>
<h1>Vidlist</h1>
<object width="640" height="385">
<param name="movie" value="<%= Video.first.link %>">
</param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="<%= Video.first.link %>"
type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>
</blink>
the link contains this string:http://www.youtube.com/v/KgmeL_xuB0I?fs=1&hl=en_US&rel=0&autoplay=1
In routes .rb, i have uncommented the default route matching.
Then, i started server.Entered localhost:3000/Videos/vidlist
The browser doesn't display anything at all.
and there's nothing in the console too when the server is running
Have you tried using html_safe on the link? This will help ensure that you don't have issues with escape chars etc.

How to upload vimeo videos using Media plugin (and not HTML option)

I'm working on Ruby on Rails 2.3.8 and the last version of rails tinyMCE plugin.
I would like users to have the ability of adding all kind of videos into the text editor. As it's now, they can add Youtube videos, and also they can upload them from their computer.
The problem is that Vimeo videos don't only create a common HTML <object> code, but they create an iframe for them, and if I try to import one of them using the Media plugin, I'll have to paste this video for example: http://vimeo.com/16430948, and it will generate the following HTML (which won't work):
<object width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
<param value="http://vimeo.com/16430948" name="src"><embed width="100" height="100" type="application/x-shockwave-flash" src="http://vimeo.com/16430948">
</object>
While Vimeo videos need the following HTML for being displayed:
<p><iframe frameborder="0" height="225" src="http://player.vimeo.com/video/16430948" width="400"></iframe></p>
<p>
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="100" width="100">
<param name="src" value="http://vimeo.com/16430948" /><embed src="http://vimeo.com/16430948" width="100" height="100" type="application/x-shockwave-flash"></embed>
</object>
Now, which is the difference between this two generated HTML? It's that the iframe is missing in the first code I've posted, so it doesn't work.
So, the question is: how do I add that iframe to the tinyMCE programmability so it's automatically added when a Vimeo video is embedded?
Well, you should write your own plugin (it is pretty simple) to check for changes the user made.
When a user entered a vimeo link you just grab the relevant content from the editor and put it into a new element (an iframe).
Your code should look something like this (you will have to modify it, but i am sure you will get the right direction):
// you may choose an other event to check for
ed.onChange.add(function(ed){
var body = ed.getBody();
// check for vimeo using jquery object
$(body).find('param').each(function(index, Element){
// vimeo adress is found in value
if (this.value.search('http://vimeo.com') == -1) return;
var node = this;
var iframe_not_parent = 1;
while(node.nodeName !== 'body'){
node = node.parentNode;
if (node.nodeName !== 'iframe'){
iframe_not_parent = 0;
break;
}
}
// ok, this vimeo thing is not inside an iframe - put it inside
if (iframe_not_parent){
with(document.getElementById(iframe_id).contentWindow){
var new_iframe = document.createElement("iframe");
this.parentNode.parentNode.append(new_iframe);
new_iframe.append(this.parentNode);
}
}
});
});

Resources