I am curious if it is possible to use this api with embedded videos that are only on Google Drive? I am trying the code below and the player is loading, but I am unable to get it to control the the iframe. Is it just not possible?
<div class="view" id="viewer">
<iframe id="player"
type="text/html"
width="640" height="390"
src="https://drive.google.com/file/d/<?= vidId ?>/preview?enablejsapi=1"
frameborder="0"></iframe>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(e) {
console.log('player ready');
}
</script>
If it is not possible with the youtube iframe api, is there anyway with javascript to start and stop videos?
Thanks.
It was a way to control the iframe player google drive but it's don't work since august 2016. Google drive embed NO iframe
Video just play without api control.
Related
I have used js to include iframe youtube embed
<html>
<body>
<div id="video"></div>
</body>
<script>
// JS
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onYouTubeIframeAPIReady() {
video = new YT.Player("video", {
height: 360,
width: 640,
videoId: "rfYydagxcJI",
host: "https://www.youtube.com",
playerVars: {
fs: 0,
modestbranding: 1,
playsinline: 1,
rel: 0,
},
});
}
</script>
</html>
I also have tried to add
<iframe width="560" height="315" src="https://www.youtube.com/embed/goSiidPyiYA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
But both of these aren't showing any ads from YouTube as it should as per YouTube .
If the embeded site isn't trust worthy Google might not show Ads,
The following information is from Google.
Requirements for ads on embedded videos
Ads appear on brand safe sites: YouTube works diligently so that our advertisers' brands appear on sites that reflect our respective core values. Our systems closely evaluate websites and their content against various factors when finding out whether to turn on In-stream ads on YouTube embeds. These factors include a strict set of guidelines on content like adult imagery, violence, inappropriate and hateful language, and sites that promote infringement.
Player details: We require that the video player appear large enough to promote a positive user experience. We recommend a 560x315 pixel or larger player. Also, videos should be embedded using the standard click-to-play embed and not a scripted play.
Source: https://support.google.com/youtube/answer/132596?hl=en
ok,iframe, which holds youtube video, has a property allowfullscreen. Ex: <iframe src=videoUrl allowfullscreen></iframe>
My question is that :
does it have "unmute" property so that the video will never be unmuted at the beginning of the loading process?
Or
Does iFrame has a property that let Youtube video unmute be default?
player = new YT.Player(currentVideoId, {
events: {
'onReady': onPlayerReady
}
});
function onPlayerReady(event) {
event.target.mute();
event.target.playVideo()
}
Does anyone know if it's possible to define which video-frame is used as a preview, using the YouTube IFrame Player API?
When my video is embedded now, it shows a video-frame near the end of my video, while I want it to be one of the first frames.
I don't think that this is possible using the API, but you could display the preview image yourself. This was discussed on following stackoverflow page: YouTube embedded video: set different thumbnail
No. It's not (yet) possible.
But Niels his answer got me inspired.
Actually his referral was about Youtube video's which are already embedded in the document, while the YouTube IFrame Player API embeds the video by javascript after the document has finished loading.
HTML part:
<div id="ytplayer">
<img id="ytThumb" src="http://placehold.it/640x390&text=Play">
</div>
Javascript part:
$(document).ready(function(){
$('#ytThumb').click(function() {
//Embed the youtube player
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
});
});
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
playerVars: {
'autoplay': 1,
'rel': 0
}
});
}
While my container, image and video all have the same dimensions.
When I create an iframe player API using the onYouTubeIframeAPIReady, the link is created with the http protocol
Example:
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: '560',
height: '600',
videoId: '7j8B_r4OfAw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
iframe Result:
<iframe id="player" frameborder="0" allowfullscreen="1" title="YouTube video player" width="560" height="600" src="http://www.youtube.com/embed/7j8B_r4OfAw?enablejsapi=1"></iframe>
Does anyone know how to do the video to be created with the https protocol? Need to install the api on a platform.
Please, suggest!
You can specify https if you create the iframe element directly in your html, rather than using the div which gets replaced later on. You can create the iframe tag dynamically if you need to. Look at the bottom of this section, which spells out how to do it.
Beware — even if you load the player over https, the actual video stream may be served over http. That seems to cause a mixed-mode warning in Chrome, though not other browsers (in my experience last year; it may have since changed). See this official blog post, which explains that the player can be loaded over https but warns that the video still won't necessarily be served that way.
I need this video to play automatically. It would be nice, this code can play videos from other sources like yahoo etc.. Is it also possible to use HTML5, instead of jquery?
The function or plugin you use to display the popup window will probably be different from what you are using to display the video. In this example I used the Overlay Plugin from jQuery Tools to display the modal then used swfobject to display the YouTube Flash Player. Alternatively, you could use an HTML5 video player with Flash fallback to display the video, but you would still need it to popup your modal first.
<a href="http://www.youtube.com/v/2cxqZiWyW3g&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 1</a>
<a href="http://www.youtube.com/v/607RMNoJfl4&hl=en_US&fs=1&autoplay=1"
class="video-link">Video 2</a>
<div class="modal" id="video-modal">
<div id="video-container" style="width: 425px; height: 344px;"></div>
</div>
<script language="javascript" type="text/javascript">
$(function() {
var videoModal = $('#video-modal').overlay({
expose: {
color: 'black',
loadSpeed: 200,
opacity: 0.85
},
closeOnClick: true,
api: true
});
$('.video-link').click(function() {
videoModal.load();
var videoUrl = $(this).attr('href');
var flashvars = {};
var params = {
allowFullScreen: "true",
allowscriptaccess: "always"
};
var attributes = {};
swfobject.embedSWF(videoUrl, 'video-container', '425', '344', '9.0.0', '', flashvars, params, attributes);
return false;
});
});
</script>
SimpleModal is a great jQuery plugin as it offers many different options, one being displaying external content:
// Display an external page using an iframe
var src = "http://365.ericmmartin.com/";
$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
closeHTML:"",
containerCss:{
backgroundColor:"#fff",
borderColor:"#fff",
height:450,
padding:0,
width:830
},
overlayClose:true
});
Bill Beckelman has great series of tutorials on integrating SimpleModal with Asp.Net as custom confirmation dialog box. He demonstrates how to create great client side functionality as well as how to post back to the server. it really helped get my head wrapped around how to best integrate jQuery with ASP.Net.
Look at the demos for FancyBox and ColorBox
PrettyPhoto is a pure JavaScript library that displays images and videos in a lightbox.
For your purposes, you need you tag the YouTube link with a special "rel" attribute, the video will then open in a popup lightbox.