A pleasant good day to you all :)
I'm trying to remove the youtube branding from an iframe after it goes into fullscreen mode. You can see a sample of what I am attempting here: https://codepen.io/emjaisthebest/pen/ZmaKGv
HTML
<p><img data-video="XqC05_Oommw" alt="Play this video" src="http://img.youtube.com/vi/Y7d42LJfkqQ/0.jpg"></p>
CSS
div:fullscreen .ytp-title-text .ytp-title-link .yt-uix-sessionlink .ytp-title .ytp-title-channel-logo .ytp-title-text .ytp-watch-later-icon .ytp-button .ytp-settings-button .ytp-hd-quality-badge .ytp-title-expanded-title .ytp-youtube-button .ytp-button .yt-uix-sessionlink .ytp-menuitem-label .ytp-menuitem-content .ytp-play-button .ytp-progress-list .ytp-scrubber-button .ytp-swatch-background-color .ytp-time-duration .ytp-time-separator .ytp-time-current /Not sure if you want to hide the current time, babe/ .ytp-share-icon .ytp-pause-overlay .ytp-related-title .ytp-pause-overlay .ytp-suggestions .ytp-expand-pause-overlay .ytp-fullscreen-button .ytp-progress-bar-padding .ytp-progress-bar .admin-bar .ytp-title-channel .ytp-title-beacon .ytp-chrome-top .ytp-show-watch-later-title .ytp-share-button-visible .ytp-show-share-title {
display: none !important;
}
Javascript
if (!Element.prototype.requestFullscreen) {
Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}
// Listen for clicks
document.addEventListener('click', function (event) {
// Check if clicked element is a video thumbnail
var videoId = event.target.getAttribute('data-video');
if (!videoId) return;
// Create iframe
var iframe = document.createElement('div');
iframe.innerHTML = '<p>x</p><iframe width="560" height="315" src="https://www.youtube.com/embed/' + videoId + '?rel=0&autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>';
var video = iframe.childNodes[1];
// Replace the image with the video
event.target.parentNode.replaceChild(video, event.target);
// Enter fullscreen mode
video.requestFullscreen();
}, false);
I know the css classes for all the elements I want to hide, but every time I try, it just does NOT work.
Is there anyone out there who can help me remove the ugly youtube branding? If yes, please help me as this is my first website and I would really love to make it aesthetically pleasing.
Edit #1: Someone was suggesting that my question was a possible duplicate of another question found here on stackoverflow, but that has nothing to do with removing the youtube branding from an iframe itself or modifying the iframe while it is in fullscreen mode. I, myself was trying to change it using the :fullscreen pseudo-class with no success. Could someone please tell me what I am doing wrong?
What might work for you is the modestbranding=1 parameter. For example:
src="https://www.youtube.com/embed/' + videoId + '?rel=0&autoplay=1&modestbranding=1"
You can read more about it here: https://developers.google.com/youtube/player_parameters#modestbranding
I am trying to get a png image in google drive to appear on a google apps script html page. I can get the image to appear on the script html page if it is just at a URL somewhere on the web (see commented out line below), but not from google drive. Here is part of the code where I am trying to get as a blob and then use it in an image tag:
function getImage() {
//The next 2 lines don't produce the image on the page
var image = DriveApp.getFileById('File Id Goes Here').getBlob().getAs('image/png');
var image = '<img src = "' + image + '" width = "90%">'
//Note, the next line uncommented produces an image on the page
//var image = '<img src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" width = "90%">'
return image
}
function doGet() {
var htmlToAppend = getImage();
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('Google Image').append(htmlToAppend).setSandboxMode(HtmlService.SandboxMode.IFRAME);
return html;
}
The result is a missing image on the html page produced by the script, with the URL for the missing image ending in script.googleusercontent.com/Blob
Info on Blob is here: https://developers.google.com/apps-script/reference/base/blob (open in a separate page/tab)
Any help is appreciated.
If you can see the Using base64-encoded images with HtmlService in Apps Script or Displaying files (e.g. images) stored in Google Drive on a website, there are some workaround to get the image from drive.
One workaround is using the IFRAME sandbox mode, but this doesn't support old browsers.
All that's required is to call setSandboxMode() on your template, and your data URIs should work as expected:
var output = HtmlService.createHtmlOutput(
'<img src="data:' + contentType + ';base64,' + encoded + '"/>'
);
output.setSandboxMode(HtmlService.SandboxMode.IFRAME);
The second is using the permalink of the file:
https://drive.google.com/uc?export=view&id={fileId}
But be noted that Serving images in an Apps Script through HtmlService is deprecated .
<img src="https://googledrive.com/host/0B12wKjuEcjeiySkhPUTBsbW5j387M/my_image.png" height="95%" width="95%">
Also, refrain from using same variable names to avoid error from occuring
Hope this helps.
I have a hidden div containing a YouTube video in an <iframe>. When the user clicks on a link, this div becomes visible, the user should then be able to play the video.
When the user closes the panel, the video should stop playback. How can I achieve this?
Code:
<!-- link to open popupVid -->
<p>Click here to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>
<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40" frameborder="0" allowfullscreen></iframe>
<br /><br />
<a href="javascript:;" onClick="document.getElementById('popupVid').style.display='none';">
close
</a>
</div><!--end of popupVid -->
The easiest way to implement this behaviour is by calling the pauseVideo and playVideo methods, when necessary. Inspired by the result of my previous answer, I have written a pluginless function to achieve the desired behaviour.
The only adjustments:
I have added a function, toggleVideo
I have added ?enablejsapi=1 to YouTube's URL, to enable the feature
Demo: http://jsfiddle.net/ZcMkt/
Code:
<script>
function toggleVideo(state) {
// if state == 'hide', hide. Else: show video
var div = document.getElementById("popupVid");
var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
div.style.display = state == 'hide' ? 'none' : '';
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
iframe.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
}
</script>
<p>Click here to see my presenting showreel, to give you an idea of my style - usually described as authoritative, affable and and engaging.</p>
<!-- popup and contents -->
<div id="popupVid" style="position:absolute;left:0px;top:87px;width:500px;background-color:#D05F27;height:auto;display:none;z-index:200;">
<iframe width="500" height="315" src="http://www.youtube.com/embed/T39hYJAwR40?enablejsapi=1" frameborder="0" allowfullscreen></iframe>
<br /><br />
close
Here's a jQuery take on RobW's answer for use hiding /pausing an iframe in a modal window:
function toggleVideo(state) {
if(state == 'hide'){
$('#video-div').modal('hide');
document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
else {
$('#video-div').modal('show');
document.getElementById('video-iframe'+id).contentWindow.postMessage('{"event":"command","func":"playVideo","args":""}', '*');
}
}
The html elements referred to are the modal div itself (#video-div) calling the show / hide methods, and the iframe (#video-iframe) which has the video url as is src="" and has the suffix enablejsapi=1? which enables programmatic control of the player (ex. .
For more on the html see RobW's answer.
Here is a simple jQuery snippet to pause all videos on the page based off of RobW's and DrewT's answers:
jQuery("iframe").each(function() {
jQuery(this)[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*')
});
Hey an easy way is to simply set the src of the video to nothing, so that the video will desapear while it's hidden an then set the src back to the video you want when you click on the link that opens the video.. to do that simply set an id to the youtube iframe and call the src function using that id like this:
<script type="text/javascript">
function deleteVideo()
{
document.getElementById('VideoPlayer').src='';
}
function LoadVideo()
{
document.getElementById('VideoPlayer').src='http://www.youtube.com/embed/WHAT,EVER,YOUTUBE,VIDEO,YOU,WHANT';
}
</script>
<body>
<p onclick="LoadVideo()">LOAD VIDEO</P>
<p onclick="deleteVideo()">CLOSE</P>
<iframe id="VideoPlayer" width="853" height="480" src="http://www.youtube.com/WHAT,EVER,YOUTUBE,VIDEO,YOU,HAVE" frameborder="0" allowfullscreen></iframe>
</boby>
Since you need to set ?enablejsapi=true in the src of the iframe before you can use the playVideo / pauseVideo commands mentioned in other answers, it might be useful to add this programmatically via Javascript (especially if, eg. you want this behaviour to apply to videos embedded by other users who have just cut and paste a YouTube embed code). In that case, something like this might be useful:
function initVideos() {
// Find all video iframes on the page:
var iframes = $(".video").find("iframe");
// For each of them:
for (var i = 0; i < iframes.length; i++) {
// If "enablejsapi" is not set on the iframe's src, set it:
if (iframes[i].src.indexOf("enablejsapi") === -1) {
// ...check whether there is already a query string or not:
// (ie. whether to prefix "enablejsapi" with a "?" or an "&")
var prefix = (iframes[i].src.indexOf("?") === -1) ? "?" : "&";
iframes[i].src += prefix + "enablejsapi=true";
}
}
}
...if you call this on document.ready then all iframes in a div with a class of "video" will have enablejsapi=true added to their source, which allows the playVideo / pauseVideo commands to work on them.
(nb. this example uses jQuery for that one line that sets var iframes, but the general approach should work just as well with pure Javascript if you're not using jQuery).
I wanted to share a solution I came up with using jQuery that works if you have multiple YouTube videos embedded on a single page. In my case, I have defined a modal popup for each video as follows:
<div id="videoModalXX">
...
<button onclick="stopVideo(videoID);" type="button" class="close"></button>
...
<iframe width="90%" height="400" src="//www.youtube-nocookie.com/embed/video_id?rel=0&enablejsapi=1&version=3" frameborder="0" allowfullscreen></iframe>
...
</div>
In this case, videoModalXX represents a unique id for the video. Then, the following function stops the video:
function stopVideo(id)
{
$("#videoModal" + id + " iframe")[0].contentWindow.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*');
}
I like this approach because it keeps the video paused where you left off in case you want to go back and continue watching later. It works well for me because it's looking for the iframe inside of the video modal with a specific id. No special YouTube element ID is required. Hopefully, someone will find this useful as well.
You can stop the video by calling the stopVideo() method on the YouTube player instance before hiding the div e.g.
player.stopVideo()
For more details see here: http://code.google.com/apis/youtube/js_api_reference.html#Playback_controls
RobW's way worked great for me. For people using jQuery here's a simplified version that I ended up using:
var iframe = $(video_player_div).find('iframe');
var src = $(iframe).attr('src');
$(iframe).attr('src', '').attr('src', src);
In this example "video_player" is a parent div containing the iframe.
just remove src of iframe
$('button.close').click(function(){
$('iframe').attr('src','');;
});
Rob W answer helped me figure out how to pause a video over iframe when a slider is hidden. Yet, I needed some modifications before I could get it to work. Here is snippet of my html:
<div class="flexslider" style="height: 330px;">
<ul class="slides">
<li class="post-64"><img src="http://localhost/.../Banner_image.jpg"></li>
<li class="post-65><img src="http://localhost/..../banner_image_2.jpg "></li>
<li class="post-67 ">
<div class="fluid-width-video-wrapper ">
<iframe frameborder="0 " allowfullscreen=" " src="//www.youtube.com/embed/video-ID?enablejsapi=1 " id="fitvid831673 "></iframe>
</div>
</li>
</ul>
</div>
Observe that this works on localhosts and also as Rob W mentioned "enablejsapi=1" was added to the end of the video URL.
Following is my JS file:
jQuery(document).ready(function($){
jQuery(".flexslider").click(function (e) {
setTimeout(checkiframe, 1000); //Checking the DOM if iframe is hidden. Timer is used to wait for 1 second before checking the DOM if its updated
});
});
function checkiframe(){
var iframe_flag =jQuery("iframe").is(":visible"); //Flagging if iFrame is Visible
console.log(iframe_flag);
var tooglePlay=0;
if (iframe_flag) { //If Visible then AutoPlaying the Video
tooglePlay=1;
setTimeout(toogleVideo, 1000); //Also using timeout here
}
if (!iframe_flag) {
tooglePlay =0;
setTimeout(toogleVideo('hide'), 1000);
}
}
function toogleVideo(state) {
var div = document.getElementsByTagName("iframe")[0].contentWindow;
func = state == 'hide' ? 'pauseVideo' : 'playVideo';
div.postMessage('{"event":"command","func":"' + func + '","args":""}', '*');
};
Also, as a simpler example, check this out on JSFiddle
This approach requires jQuery. First, select your iframe:
var yourIframe = $('iframe#yourId');
//yourId or something to select your iframe.
Now you select button play/pause of this iframe and click it
$('button.ytp-play-button.ytp-button', yourIframe).click();
I hope it will help you.
RobW's answers here and elsewhere were very helpful, but I found my needs to be much simpler. I've answered this elsewhere, but perhaps it will be useful here also.
I have a method where I form an HTML string to be loaded in a UIWebView:
NSString *urlString = [NSString stringWithFormat:#"https://www.youtube.com/embed/%#",videoID];
preparedHTML = [NSString stringWithFormat:#"<html><body style='background:none; text-align:center;'><script type='text/javascript' src='http://www.youtube.com/iframe_api'></script><script type='text/javascript'>var player; function onYouTubeIframeAPIReady(){player=new YT.Player('player')}</script><iframe id='player' class='youtube-player' type='text/html' width='%f' height='%f' src='%#?rel=0&showinfo=0&enablejsapi=1' style='text-align:center; border: 6px solid; border-radius:5px; background-color:transparent;' rel=nofollow allowfullscreen></iframe></body></html>", 628.0f, 352.0f, urlString];
You can ignore the styling stuff in the preparedHTML string. The important aspects are:
Using the API to create the "YT.player" object. At one point, I only had the video in the iFrame tag and that prevented me from referencing the "player" object later with JS.
I've seen a few examples on the web where the first script tag (the one with the iframe_api src tag) is omitted, but I definitely needed that to get this working.
Creating the "player" variable at the beginning of the API script. I have also seen some examples that have omitted that line.
Adding an id tag to the iFrame to be referenced in the API script. I almost forgot that part.
Adding "enablejsapi=1" to the end of the iFrame src tag. That hung me up for a while, as I initially had it as an attribute of the iFrame tag, which does not work/did not work for me.
When I need to pause the video, I just run this:
[webView stringByEvaluatingJavaScriptFromString:#"player.pauseVideo();"];
Hope that helps!
This is working fine to me with YT player
createPlayer(): void {
return new window['YT'].Player(this.youtube.playerId, {
height: this.youtube.playerHeight,
width: this.youtube.playerWidth,
playerVars: {
rel: 0,
showinfo: 0
}
});
}
this.youtube.player.pauseVideo();
A more concise, elegant, and secure answer: add “?enablejsapi=1” to the end of the video URL, then construct and stringify an ordinary object representing the pause command:
const YouTube_pause_video_command_JSON = JSON.stringify(Object.create(null, {
"event": {
"value": "command",
"enumerable": true
},
"func": {
"value": "pauseVideo",
"enumerable": true
}
}));
Use the Window.postMessage method to send the resulting JSON string to the embedded video document:
// |iframe_element| is defined elsewhere.
const video_URL = iframe_element.getAttributeNS(null, "src");
iframe_element.contentWindow.postMessage(YouTube_pause_video_command_JSON, video_URL);
Make sure you specify the video URL for the Window.postMessage method’s targetOrigin argument to ensure that your messages won’t be sent to any unintended recipient.
Is there a way I can have JavaScript/jQuery know when a Flash object has been clicked (and still have Flash process the click)?
I tried putting a table on top of the object with position: fixed and a z-index and the object set to param name='wmode' value='transparent' so I could have my JavaScript detect which column was clicked using jQuery's click(), but the clicks were never intercepted by JavaScript (Chromium Linux).
Is there another way to accomplish this?
Thank you Marty Wallace and Darwin!
<div id='flash'>
<object>
<param name='wmode' value='transparent' />
<embed src='foo.swf' wmode=transparent allowfullscreen='true' allowscriptaccess='always'>
</embed>
</object>
</div>
<div id='output'></div>
<script type='text/javascript'>
$('#flash').mousedown(function (e){
$('#output').append('<br>X: ' + e.pageX + ' ; Y: ' + e.pageY);
});
</script>
After testing, the XY coordinates of any clicks on the Flash object will be accurately printed to the screen and mouse interaction with the Flash object will proceed as normal.
Now irrelevant:
Only if you have access to the flash source using ExternalInterface call. This is one of the reasons why flash for web is evil.
I'm really new to Adobe Air, and I'm trying to get a list of YouTube videos by a specific user using the YouTube API through JavaScript.
I've tried several examples that all seem to work great when I simply click on it (inside Aptana Studio) and Run as a JavaScript Web Application.
As soon as I try to run the same thing as an Adobe Air Application, I don't get any data. Why is that? I don't know if there's something very obvious that I'm overlooking or what.
This is what I was looking at most recently:
http://code.google.com/apis/youtube/2.0/developers_guide_json.html
Can someone point me in the right direction or tell me why this isn't working in Adobe Air?
Update: OK, here's how I got it working, for anybody visiting from 2019 (tip of the hat to http://xkcd.com/979/):
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
backgroundColor="#000000" verticalAlign="middle" horizontalAlign="center"
creationComplete="init()" borderStyle="solid">
<mx:Script>
<![CDATA[
import mx.core.UIComponent;
public var html : HTMLLoader = null;
protected var url : String = null;
protected function init()
{
/* Your embedded html with all the youtube REST calls is in the "local"
subdirectory of the application directory. Note the relation between
the local url, the sandbox root and the remote url. */
var localUrl : String = "app:/local/yt.html";
var sandboxRoot : String = "http://youtube.com/";
var remoteUrl : String = "http://youtube.com/local/yt.html";
html = new HTMLLoader();
html.addEventListener(Event.COMPLETE, htmlLoaded);
/* Embed your youtube html in an iframe that is loaded dynamically. You
could also just have this html code in a separate html file and load
it through html.load() instead of html.loadString(). */
var htmlString : String = "<html>"
+ "<body><center>"
+"<iframe width='100%' height='100%' src='" +remoteUrl
+"' sandboxRoot='"+sandboxRoot+"' documentRoot='app:/' "
+" allowCrossDomainXHR='true'" /* May not be necessary */
+" id='yt' name='yt'></iframe>"
+ "</center></body></html>";
/* The next line is needed to allow the REST API in the embedded html
to call home when loading through loadString. */
html.placeLoadStringContentInApplicationSandbox = true;
html.loadString(htmlString);
}
protected function htmlLoaded(e:Event):void
{
html.removeEventListener(Event.COMPLETE, htmlLoaded);
frame.addChild(html);
trace("html load complete.");
}
]]>
</mx:Script>
<mx:UIComponent id="frame" width="100%" height="100%" visible="true"/>
</mx:HBox>
Note that this is a cleaned up version of my code and I haven't tried running it, so it may not work out of the box, but that's essentially it.
I believe the reason is that AIR does not allow external JavaScript files to be loaded:
http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7f0e.html#WS5b3ccc516d4fbf351e63e3d118666ade46-7ef7
I guess one option is to muck about with their cross-scripting and sandboxing stuff...