i was using uiwebview to play embded youtube video but today as sudden it stopped working any one knows work around?
NSString* videoHTML = [NSString stringWithFormat:#"\
<html>\
<head>\
<style type=\"text/css\">\
iframe {position:absolute; top:50%%; margin-top:-130px;}\
body {background-color:#000; margin:0;}\
</style>\
<script type=\"text/javascript\" src=\"https://www.youtube.com/player_api\"></script>\
<script>\
var player;\
function onYouTubeIframeAPIReady() {\
player = new YT.Player('player',{ events: {\
'onReady': onPlayerReady}\
});}\
function onPlayerReady(event) {\
setTimeout(function() {\
event.target.playVideo();\
}, 1000);\
}\
</script>\
</head>\
<body>\
<iframe class=\"youtube-player\" background-color:#000000 allowtransparency= \"true\" type=\"text/html\" width=100%% height=240px src=\"http://www.youtube.com/embed/%#?fs=1&autoplay=1&rel=0&version=3&enablejsapi=1&showinfo=0\" frameborder=\"0\" allowfullscreen/>\
</body>\
</html>",self.videoID];
[self.webView loadHTMLString:videoHTML baseURL:nil];
[webView setAllowsInlineMediaPlayback:YES];
Change /embed/... to /v/... and it'll work fine.
i changed the whole html to only reffere to mobile version of youtube site
Related
I've been using the iframe embed with control=2 parameter as described by the docs for years.
https://developers.google.com/youtube/player_parameters
Today 7/20/17 all the placeholder thumbnails have stopped showing.
I can still see the thumbnail in the resulting css code as a background image url. The Thumbnail though just doesn't show.
So to recap while the following still show a thumbnail
<iframe width="560" height="315" src="https://www.youtube.com/embed/1sO5OKez0JQ?rel=0&controls=1" frameborder="0" allowfullscreen></iframe>
Changing the value of control to 2, does not show the thumbnail anymore
<iframe width="560" height="315" src="https://www.youtube.com/embed/1sO5OKez0JQ?rel=0&controls=2" frameborder="0" allowfullscreen></iframe>
I've also noticed that bug for a week approximatively.
But actually there's a better way to load a Youtube iframe that costs less ressources than the classic controls=2 parameter.
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
.youtube-player{position:relative;width:560px;height:315px;cursor:pointer;background-color:#000000}
.youtube-player img{width:100%;height:auto;-webkit-transition: .4s all;-moz-transition: .4s all;transition: .4s all;}
.youtube-player .play{position:absolute;cursor:pointer;width:67px;height:47px;left:50%;margin-left:-34px;top:50%;margin-top:-24px;background:#ffffff;border-radius:20px;opacity:.8}
.youtube-player .play i{margin-top:-10px}
.youtube-player .play i:before{font-size:68px}
.youtube-player iframe{width:100%;height:100%;}
.youtube-player:hover .play{opacity:1}
.youtube-player:hover .play i{color:#cc181e}
</style>
<div class="youtube-player" data-id="0LRoDMe3mGk"></div>
<script>
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
div = document.createElement("div");
div.setAttribute("data-id", v[n].dataset.id);
div.innerHTML = ytplayerThumb(v[n].dataset.id);
div.onclick = ytplayerIframe;
v[n].appendChild(div);
}
});
function ytplayerThumb(id) {
var thumb = '<img src="https://i.ytimg.com/vi/0LRoDMe3mGk/mqdefault.jpg">',
play = '<div class="play"><i class="fa fa-youtube-play" aria-hidden="true"></i></div>';
return thumb.replace("ID", id) + play;
}
function ytplayerIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/0LRoDMe3mGk?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.parentNode.replaceChild(iframe, this);
}
</script>
This is of course considering you already load Fontawesome for other purposes. If not you should adapt the play button the way it suits you.
Regards,
My Application is using custom font ("Roboto"), I am opening a HTML page( this web page is also using Roboto font in CSS) in UIWebView within application, in which font of web page is bold.
can anyone help?, what could be the problem.
You have following solution may be any one help you.
1) Add in .css and meta tags as follow.
html {
-webkit-text-size-adjust: none; /* Never autoresize text */
}
and meta tags as follow
<meta name='viewport' content='width=device-width; initial-scale=1.0; maximum-scale=1.0;'>
2) You can also inject both into an existing website, using this javascript code as follow.
var style = document.createElement(\"style\");
document.head.appendChild(style);
style.innerHTML = "html{-webkit-text-size-adjust: none;}";
var viewPortTag=document.createElement('meta');
viewPortTag.id="viewport";
viewPortTag.name = "viewport";
viewPortTag.content = "width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;";
document.getElementsByTagName('head')[0].appendChild(viewPortTag);
and Use UIWebViewDelegate (webViewDidFinishLoad) method
- (void)webViewDidFinishLoad:(UIWebView *)webView{
NSString *javascript = #"var style = document.createElement(\"style\"); document.head.appendChild(style); style.innerHTML = \"html{-webkit-text-size-adjust: none;}\";var viewPortTag=document.createElement('meta');viewPortTag.id=\"viewport\";viewPortTag.name = \"viewport\";viewPortTag.content = \"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\";document.getElementsByTagName('head')[0].appendChild(viewPortTag);";
[webView stringByEvaluatingJavaScriptFromString:javascript];
}
you can implement webView delegate and change font when load webView.
func webViewDidStartLoad(webView : UIWebView) {
//your code
}
<iframe width="100%" height="100%" src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen>
If you remove ?autoplay=1 the video does not work. Looks like you cannot use the controls parameter without autoplay enabled.
Not sure why this is not mentioned in the YouTube embed writeup.
Hope I'm wrong.
https://developers.google.com/youtube/player_parameters#controls
Set autoplay=0
<iframe width="100%" height="100%" src="//www.youtube.com/embed/qUJYqhKZrwA?autoplay=0&showinfo=0&controls=0" frameborder="0" allowfullscreen>
As seen here: Autoplay=0 Test
To continue using the iframe YouTube, you should only have to change ?autoplay=1 to ?autoplay=0.
Another way to accomplish this would be by using the YouTube JavaScript Player API. (https://developers.google.com/youtube/js_api_reference)
Edit: the YouTube JavaScript Player API is no longer supported.
<div id="howToVideo"></div>
<script type="application/javascript">
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = false;
ga.src = 'http://www.youtube.com/player_api';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
var done = false;
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('howToVideo', {
height: '390',
width: '640',
videoId: 'qUJYqhKZrwA',
playerVars: {
controls: 0,
disablekb: 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
console.log('onPlayerReady', evt);
}
function onPlayerStateChange(evt) {
console.log('onPlayerStateChange', evt);
if (evt.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 6000);
done = true;
}
}
function stopVideo() {
console.log('stopVideo');
player.stopVideo();
}
</script>
Here is a jsfiddle for the example: http://jsfiddle.net/fgkrj/
Note that player controls are disabled in the "playerVars" part of the player. The one sacrifice you make is that users are still able to pause the video by clicking on it. I would suggest writing a simple javascript function that subscribes to a stop event and calls player.playVideo().
use autoplay=0
autoplay takes 2 values.
Values: 0 or 1. Default is 0. Sets whether or not the initial video will autoplay when the player loads.
the important part
autoplay=0&showinfo=0&controls=0
Here is the demo for ur problem FIDDLE
?modestbranding=1&autohide=1&showinfo=0&controls=0
autohide=1
is something that I never found... but it was the key :) I hope it's help
If you add this ?showinfo=0&iv_load_policy=3&controls=0 before the end of your src, it will take out everything but the bottom right YouTube logo
working example: http://jsfiddle.net/42gxdf0f/1/
Follow this https://developers.google.com/youtube/player_parameters for more info about video controls like:
<iframe id="video_iframe" width="660" height="415" src="http://www.youtube.com/v/{{course_url}}?start=7&autoplay=0&showinfo=0&iv_load_policy=3&rel=0"
frameborder="0"
allowfullscreen></iframe>
start=7&autoplay=0&showinfo=0&iv_load_policy=3&rel=0"
frameborder="0"
all controls are described in there
To remove you tube controls and title you can do something like this
<iframe width="560" height="315" src="https://www.youtube.com/embed/zP0Wnb9RI9Q?autoplay=1&showinfo=0&controls=0" frameborder="0" allowfullscreen ></iframe>
code with output
showinfo=0 is used to remove title and &controls=0 is used for remove controls like volume,play,pause,expend.
You can hide the "Watch Later" Button by using "Youtube-nocookie" (this will not hide the share Button)
Adding controls=0 will also remove the video control bar at the bottom of the screen and using modestbranding=1 will remove the youtube logo at bottom right of the screen
However using them both doesn't works as expected (it only hides the video control bar)
<iframe width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/fNb-DTEb43M?controls=0" frameborder="0" allowfullscreen></iframe>
Autoplay works only with /v/ instead of /embed/, so change the src to:
src="//www.youtube.com/v/qUJYqhKZrwA?autoplay=1&showinfo=0&controls=0"
I am embedding youtube video inside a UIWebView. The Size of the UIWebView is 124x86. And the Code for the same is:
NSString* embedHTML =#"\
<html><head>\
<style type=\"text/css\">\
body {\
background-color: transparent;\
color: white;\
}\
</style>\
</head><body style=\"margin:0\">\
<embed id=\"yt\" src=\"%#\" type=\"application/x-shockwave-flash\" \
width=\"124\" height=\"86\"></embed>\
</body></html>";
When Loaded, the thumbnail doesn't show up properly. its size is way bigger than 124x86 and not fitting into UIWebView. (So now I can see only 1/4th portion of the thumbnail).
I want that thumbnail gets shrinks (or gets generated) to the size of 124x86 and fits into UIWebView.
I have a web view that doesn't take up the full screen. I set it's url to a youtube video to play the video in the web view area. When I change orientation of the device the view resizes but the content doesn't. If I set the scales page to fit flag on the web view it changes orientation properly but there's always white space around the video on the right and bottom regardless of orientation.
How can I get the video to fill the web view, and resize with orientation change without the wasted padding. Alternatively how can I make the video play full screen like it does on iPhone (which would be a viable alternative for me, skipping over the layout issue)
I read this tutorial and was able to solve the problem.
http://webdesignerwall.com/tutorials/css-elastic-videos
basically you can set the size of the containing item to one thing for portrait and another for landscape.
Also set your object embed code to have a height width of 100% instead of a fixed width.
This is my html:
<span class="youtube">
<object type="application/x-shockwave-flash" id="ytPlayer" style="visibility: visible;" allowscriptaccess="always">
</object>
</span>
This is my javascript:
var ytswf = document.getElementById('ytPlayer');
var videoID = 'Nky9omXFZD4';
ytswf.outerHTML = "<object height=\"100%\" width=\"100%\" type=\"application/x-shockwave-flash\" data=\"http://www.youtube.com/v/" + videoID + "&enablejsapi=1&playerapiid=ytplayerObj&rel=0&fs=1&autoplay=0&egm=0\" id=\"ytPlayer\" style=\"visibility: visible;\" ><param name=\"allowFullScreen\" value=\"True\" /><param name=\"allowScriptAccess\" value=\"always\" /></object>";
This is my css:
.youtube{width:432px; height:245px;}
#media only screen and (orientation:portrait)
{
.youtube{width:702px; height:398px;}
}
I use the following code and it works for me
// css
// You can add your own width and height values or insert this values using stringWithFormat
NSString *css = #"<style type=\"text/css\">\
.youtube{width:320px; height:363px;}\
#media only screen and (orientation:portrait) { \
.youtube{width:320px; height:363px;}\
}\
\
#media only screen and (orientation:landscape) {\
.youtube{width:480px; height:203px;}\
}\
</style>\
";
// different format of urls for iOS 5 and iOS 6
NSString *src = ([[[UIDevice currentDevice] systemVersion] compare:#"6" options:NSNumericSearch] == NSOrderedAscending)
? #"http://www.youtube.com/watch?v=%#?autoplay=1" // iOS 5
: #"http://www.youtube.com/v/%#?autoplay=1"; // iOS 6
// inserting css in <head> and inserting src
NSString *youTubeVideoHTML = [NSString stringWithFormat:
(#"<html><head>%#</head>\
<body style=\"margin:0\">\
<embed class=\"youtube\" id=\"yt\" src=\"%#\" type=\"application/x-shockwave-flash\" \
></embed>\
</body></html>") , css , src ];
// setting YouTube video ID
finalHtml = [NSString stringWithFormat: youTubeVideoHTML , videoID ];
[self.webView loadHTMLString:finalHtml baseURL:nil];