youtube html video integration - html

I have a slight problem with a webpage : when I try to load a youtube video it shows a white rectangle ( I'm on firefox with win 8.1 x 64 and Yes, I did a flash player update )
Here's the code :
<object type="application/x-shockwave-flash" width="800" height="600"data="https://www.youtube.com/watch?v=jRXQsQKGqIU"><param name="movie" value="https://www.youtube.com/watch?v=jRXQsQKGqIU" /></object>
Can somebody tell me what's wrong with it ?
The other parts of the HTML code are just fine but this youtube code keeps showing me this white rectangle in my webpage instead of the video.

According to Google, the best way to embed is to use iframes:
Best practice: IFrame embeds are the recommended method for embedding
a YouTube player because the IFrame will select the appropriate player
based on the client's capabilities and available YouTube file formats.
That would look like this:
<iframe width="420" height="315" src="//www.youtube.com/embed/jRXQsQKGqIU" frameborder="0" allowfullscreen></iframe>
However, if you wish to use the Object tag, here's a working example:
<object width="640" height="390">
<param name="movie"
value="https://www.youtube.com/v/jRXQsQKGqIU?version=3&autoplay=1"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/M7lc1UVf-VE?version=3&autoplay=1"
type="application/x-shockwave-flash"
allowscriptaccess="always"
width="640" height="390"></embed>
</object>
Working JS Fiddle: http://jsfiddle.net/RAZC4/2/
https://developers.google.com/youtube/player_parameters

Maybe you can use the new code..
<iframe width="800" height="600" src="//www.youtube.com/embed/jRXQsQKGqIU" frameborder="0" allowfullscreen></iframe>

Have you made sure that your browser supports flash?
Otherwise I would suggest using the new embed code

Related

Object youtube embed not working in Firefox

So for some reason, I'm having issues making my object embed work on Firefox, but it works on all other browsers such as Chrome, Edge, etc..
Here is the code that I'm using:
<object width="640" height="400">
<param name="movie" value="https://www.youtube.com/embed/X29_UP1FWVQ">
<embed src="https://www.youtube.com/embed/X29_UP1FWVQ" type="application/x-shockwave-flash" width="640" height="400">
</object>
Does anyone know if something special has to be passed for Firefox?
I figured out the problem, you need an data="" attribute on the object for this to work.

Mystery issue with embeded youtube video issue on IOS using Ionic/Cordova

I have previously been able to play embedded videos on my Android and iOS devices. After some time of updates, the video all of sudden stop working for iOS but still works for Android. This is weird and hard to debug for me since I know little of the iOS side. Could someone point out an obvious problem or suggestion? I even tried reverting the code to a time the YouTube videos did not work on the iOS and displays nothing.
Here is the code I am using
HTML:
<iframe ng-if="data.youtube" width="90%" height="315" src='{{trustSrc(data.youtube)}}' frameborder="0" allowfullscreen="false" id="informationVideoBorder"></iframe>
JS:
$scope.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
}
Any guru advice on tackling this?
Instead of using iframe try this iOS specific snippet:
Controller:
var video_embeded = 'CfFjwsA8PyU';
$scope.videoUrl = "https://www.youtube.com/v/'+video_embeded+'&hl=en_US&feature=player_embedded&version=3";
View
<object>
<param name="movie" value="{{videoUrl}}"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param>
<embed src="https://www.youtube.com/v/'+video_embeded+'?suggestedQuality=medium&hl=en_US&feature=player_embedded&version=3" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always"></embed>
</object>

youtube embed video not working with safari

I have a simple page with this HTML code :
<iframe width="100%" height="480" src="https://www.youtube.com/embed/5FSsednibXQ?controls=0&showinfo=0" frameborder="0" allowfullscreen=""></iframe>
It is working fine in chrome but not in safari. I only have the black box with safari.
Any idea ? What is the correct way to embed a youtube video in safari ?
Try using this:
<object>
<param name="movie" value="http://www.youtube.com/v/[VIDEO_ID]"></param>
<embed src="http://www.youtube.com/v/[VIDEO_ID]" type="application/x-shockwave-flash"></embed>
</object>
It's explained here:
Making youtube.com/embed URLs work on iOS

How to show default Playback Controls with the AS3 YouTube API?

I've read the YouTube API documentation to add the playback controls, but I'm not sure exactly where I'm supposed to specify these parameters.
https://developers.google.com/youtube/player_parameters?playerVersion=AS3#controls
I've tried to append "&controls=1" to the Player's URL when I load it inside of a Loader object, but they still don't show up.
Are they supposed to be called from somewhere else? Or set on the player:Object? for example:
player.controls = 1;
No matter my efforts, none of my attempts worked.
Got any ideas?
That is the URL parameters on the embed, as you suspected. To disable controls you can use this object embed, which will use AS3:
<object width="853" height="480"><param name="movie" value="http://www.youtube.com/v/M7lc1UVf-VE?version=3&controls=0">
<param name="allowFullScreen" value="true">
<param name="allowscriptaccess" value="always">
<embed src="http://www.youtube.com/v/M7lc1UVf-VE?version=3&controls=0" type="application/x-shockwave-flash" width="853" height="480" allowscriptaccess="always" allowfullscreen="true">
</object>
The parameters are passed in the embed src tag. Note that the source parameters needs to be URL encoded, so the parameter separator is "&"
The alternative way is to use iframe embed
<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE?controls=0"
frameborder="0" allowfullscreen>
A nice page to play around with is Youtube's demo page: https://developers.google.com/youtube/youtube_player_demo There you can get the full embed code for the parameters you've selected as well, but the object embed don't seem to generated there.
For embedding using javascript there is also the SWFObject library where you pass these parameters as flashVars:
https://developers.google.com/youtube/js_api_reference?hl=de#Embedding
Hope that helps,
Christian

Soundcloud embedded HTML theme_color option not working

I am embedding Soundcloud HTML code in a web page to show the audio player. Previewing in Safari 5.1.4 on Mac and running in a webview in my iPhone app (which should behave the same as Safari) the embed parameter "theme_color" does not work.
E.g.
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http://api.soundcloud.com/tracks/44200324&auto_play=true&color=915f33&theme_color=00FF00"></iframe>
Anyone know why or a workaround? I want to be able to "colourise" the main look of the player from grey to another colour.
You can have custom colors using flash object:
<object height="81" width="100%">
<param name="movie" value="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F32678080&show_comments=true&auto_play=false&color=00cc00&theme_color=111111"></param>
<param name="allowscriptaccess" value="always"></param>
<embed allowscriptaccess="always" height="81" src="https://player.soundcloud.com/player.swf?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F32678080&show_comments=true&auto_play=false&color=00cc00&theme_color=111111" type="application/x-shockwave-flash" width="100%"></embed>
</object>
For the list of available params take a look at:
http://developers.soundcloud.com/docs/widget