youtube embedded

I’m trying to have youtube videos embedded on my app.

I saw old posts about this and tried every single params in google api iframe.

https://developers.google.com/youtube/player_parameters

it’s pretty easy to have it embedded. the problem is, that is pretty easy also to get out of my video and watch other videos. with that, google and apple will not allow me to have apps rated +4 (saw one post with the same problem). i used all parameters from google with relative success, but at the end of the day i still was able to watch other movies. the problem is the link from youtube is always present so i’m always able to open youtube.

is there a way to detect a webcall inside my webview? so i could detect it and use system.url so it will launch outside my app. in the simulator without doing nothing it gives that behavior. if i click youtube logo it will not open youtube inside my app webview. it will open an outside window. i want that in android and ios. is this possible?

it’s the 2 best thing I could think about, being the first removing all links if that’s legal and doable.

regards,

Carlos.

I don’t know if this will help, but when links are clicked on you can get an event back in your app:

https://docs.coronalabs.com/api/event/urlRequest/url.html

I don’t know if you can block the click or not, but at least you would know it happened. You might want to look at native.showWebPopup() https://docs.coronalabs.com/api/library/native/showWebPopup.html

as well. This is an older method, but the technique on handling URL’s might work for native.newWebView as well.

Rob

@Carlos, I helped someone with this exact problem.  The solution is to embed the video into a small html page and then position DIVs over bit of the embed so users can only click on the actual video.  You then load that html page into webView.

@sphere, i’m making an html on the fly. creating an iframe with the video inside. the problem is not the embedded…that i can do easy. the problem is pressing INSIDE the video in the logo it will redirect to youtube webpage even if the webview is little.

@Rob, i remember using urlRequests on my old map to open scenes from the webview map, it worked back then so it should work here. i had a clue that exist something like that, but my memory never was good… i will try that aproach. thx.

@Carlos, you misunderstand.  Float DIVs over the top of the youtube touch points so the clicks get intercepted.  Its real simple to do and works fine.

​I helped someone get their app approved when Apple refused it for the exact same reason.

i will try to put divs around it. i saw your post when you help the other person, you provided a link with an embed.html but that file is already gone.

*edit*

its something like this?

\<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY\_lvKIQ" frameborder="0"\>\</iframe\> \<div id="overlay"\>\</div\> css: #overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.8; /\*background:rgba(255,255,255,0.8); or just this\*/ z-index:50; color:#fff; }

<div class=“youtube”>

    <iframe src=“https://www.youtube.com/embed/HkMNOlYcpHg” frameborder=“0” allowfullscreen></iframe>

</div>

.youtube {

    position: relative;

    height: 0;

    padding-bottom: 56.25%;

}

.youtube iframe {

    position: absolute;

    top:0;

    left: 0;

    width: 100%;

    height: 100%;

}

Well that would cover the entire iframe and not allow the user to pause/resume the video.  It will take a few DIVs if I remember correctly.

i went with @Rob suggestion.

if anyone cares here’s the code to have embedded youtube on your app:

 local filename="story.html" local posY=0 local story = {} story.title = "Title here" story.youTubeId="duOA3FgpZqY" story.description="Description here" local title = story.title or nil local youTubeId=story.youTubeId or nil local path = system.pathForFile( filename, system.TemporaryDirectory ) local fh, errStr = io.open( path, "w" ) if fh then fh:write("\<!doctype html\>\n\<html\>\n\<head\>\n\<meta charset=\"utf-8\"\>") fh:write("\<meta name=\"viewport\" content=\"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\"/\>\n") fh:write("\<style type=\"text/css\"\>\n html { -webkit-text-size-adjust: none; font-family: HelveticaNeue-Light, Helvetica, Droid-Sans, Arial, san-serif; font-size: 1.0em; } h1 {color:white; font-size:1.25em;} p {color:white; font-size:0.9em; } \</style\>") fh:write("\</head\>\n\<body style=\"background-color:#000000;\"\>\n") if title then fh:write("\<h1\>" .. title .. "\</h1\>\n") end if youTubeId then local videoID = youTubeId local height = math.floor(display.contentWidth / 16 \* 9) fh:write([[\<iframe width="100%" height="]] .. height .. [[" src="https://www.youtube.com/embed/]] .. videoID .. [[?controls=1&fs=1&modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen\>\</iframe\>]]) end if story.description then fh:write("\n\<p\>"..story.description.."\</p\>") end fh:write( "\n\</body\>\n\</html\>\n" ) io.close( fh ) else print( "Create file failed!" ) end local webListener local webView local function create\_webView() if webView then webView:removeEventListener( "urlRequest", webListener ) display.remove(webView) webView=nil end webView = native.newWebView(0, 0, display.contentWidth, display.actualContentHeight - posY) webView.x = display.contentCenterX webView.y = posY webView.anchorY = 0 webView:request(filename, system.TemporaryDirectory) webView:addEventListener( "urlRequest", webListener ) end function webListener(event) local url = event.url or nil if not ( string.find(url, filename )) and url then print("url: ".. url) create\_webView() system.openURL(url) end return true end create\_webView()

even if you can catch the url from the webview it will still open it inside the webview so i had to remove the webview and created again. this way it prevents to change to the new link. the new link is opened outside the app. this way the app only shows your intended video, it still gives the ability to full screen the video or see it outside the app in youtube webpage.

if you only want to show youtube videos without the ability to go outside your app you need to go with @sphere suggestion. it works. i tried with the code i provided and worked fine it a little changes.

thank both :slight_smile:

1 Like

I don’t know if this will help, but when links are clicked on you can get an event back in your app:

https://docs.coronalabs.com/api/event/urlRequest/url.html

I don’t know if you can block the click or not, but at least you would know it happened. You might want to look at native.showWebPopup() https://docs.coronalabs.com/api/library/native/showWebPopup.html

as well. This is an older method, but the technique on handling URL’s might work for native.newWebView as well.

Rob

@Carlos, I helped someone with this exact problem.  The solution is to embed the video into a small html page and then position DIVs over bit of the embed so users can only click on the actual video.  You then load that html page into webView.

@sphere, i’m making an html on the fly. creating an iframe with the video inside. the problem is not the embedded…that i can do easy. the problem is pressing INSIDE the video in the logo it will redirect to youtube webpage even if the webview is little.

@Rob, i remember using urlRequests on my old map to open scenes from the webview map, it worked back then so it should work here. i had a clue that exist something like that, but my memory never was good… i will try that aproach. thx.

@Carlos, you misunderstand.  Float DIVs over the top of the youtube touch points so the clicks get intercepted.  Its real simple to do and works fine.

​I helped someone get their app approved when Apple refused it for the exact same reason.

i will try to put divs around it. i saw your post when you help the other person, you provided a link with an embed.html but that file is already gone.

*edit*

its something like this?

\<iframe class="youtube-player" type="text/html" width="520" height="330" src="http://www.youtube.com/embed/NWHfY\_lvKIQ" frameborder="0"\>\</iframe\> \<div id="overlay"\>\</div\> css: #overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:#000; opacity:0.8; /\*background:rgba(255,255,255,0.8); or just this\*/ z-index:50; color:#fff; }

<div class=“youtube”>

    <iframe src=“https://www.youtube.com/embed/HkMNOlYcpHg” frameborder=“0” allowfullscreen></iframe>

</div>

.youtube {

    position: relative;

    height: 0;

    padding-bottom: 56.25%;

}

.youtube iframe {

    position: absolute;

    top:0;

    left: 0;

    width: 100%;

    height: 100%;

}

Well that would cover the entire iframe and not allow the user to pause/resume the video.  It will take a few DIVs if I remember correctly.

i went with @Rob suggestion.

if anyone cares here’s the code to have embedded youtube on your app:

 local filename="story.html" local posY=0 local story = {} story.title = "Title here" story.youTubeId="duOA3FgpZqY" story.description="Description here" local title = story.title or nil local youTubeId=story.youTubeId or nil local path = system.pathForFile( filename, system.TemporaryDirectory ) local fh, errStr = io.open( path, "w" ) if fh then fh:write("\<!doctype html\>\n\<html\>\n\<head\>\n\<meta charset=\"utf-8\"\>") fh:write("\<meta name=\"viewport\" content=\"width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;\"/\>\n") fh:write("\<style type=\"text/css\"\>\n html { -webkit-text-size-adjust: none; font-family: HelveticaNeue-Light, Helvetica, Droid-Sans, Arial, san-serif; font-size: 1.0em; } h1 {color:white; font-size:1.25em;} p {color:white; font-size:0.9em; } \</style\>") fh:write("\</head\>\n\<body style=\"background-color:#000000;\"\>\n") if title then fh:write("\<h1\>" .. title .. "\</h1\>\n") end if youTubeId then local videoID = youTubeId local height = math.floor(display.contentWidth / 16 \* 9) fh:write([[\<iframe width="100%" height="]] .. height .. [[" src="https://www.youtube.com/embed/]] .. videoID .. [[?controls=1&fs=1&modestbranding=1&rel=0&showinfo=0" frameborder="0" allowfullscreen\>\</iframe\>]]) end if story.description then fh:write("\n\<p\>"..story.description.."\</p\>") end fh:write( "\n\</body\>\n\</html\>\n" ) io.close( fh ) else print( "Create file failed!" ) end local webListener local webView local function create\_webView() if webView then webView:removeEventListener( "urlRequest", webListener ) display.remove(webView) webView=nil end webView = native.newWebView(0, 0, display.contentWidth, display.actualContentHeight - posY) webView.x = display.contentCenterX webView.y = posY webView.anchorY = 0 webView:request(filename, system.TemporaryDirectory) webView:addEventListener( "urlRequest", webListener ) end function webListener(event) local url = event.url or nil if not ( string.find(url, filename )) and url then print("url: ".. url) create\_webView() system.openURL(url) end return true end create\_webView()

even if you can catch the url from the webview it will still open it inside the webview so i had to remove the webview and created again. this way it prevents to change to the new link. the new link is opened outside the app. this way the app only shows your intended video, it still gives the ability to full screen the video or see it outside the app in youtube webpage.

if you only want to show youtube videos without the ability to go outside your app you need to go with @sphere suggestion. it works. i tried with the code i provided and worked fine it a little changes.

thank both :slight_smile:

1 Like

Hello need help with native.webview…
im playing an embedded youtube using it on my app.
I need to know if there is a way for me to get a feedback if the user touched or tapped inside the webview. Even better if i can know if the user clicked play on the embedded video inside it.
Is there a way to know if there was a touch event in the webview location? i tryed getting an event behind it but the native webview blocks everything.

thanks in advance!

This thread has been inactive for over 3 years. A lot has changed since then and you also created another thread specifically for this issue, so I’m closing this thread to keep the conversation focused.

Please refrain from creating multiple posts about the same topic. You can follow this conversation at:

1 Like