Following is Function to embed youtube video in html.
In this youtube video display on click but I want to do this on load using javascript.
How can be done? Any help?
youtubeLoadVideos : function () {
// Find all the YouTube video embedded on a page
var videos = document.getElementsByClassName("youtube");
for (var i=0; i<videos.length; i++) {
var youtube = videos[i];
// Attach an onclick event to the YouTube Thumbnail
youtube.onclick = function() {
// Create an iFrame with autoplay set to true
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.id);
// The height and width of the iFrame should be the same as parent
iframe.style.width = this.style.width;
iframe.style.height = this.style.height;
iframe.style.clear = 'both';
// Replace the YouTube thumbnail with YouTube HTML5 Player
this.parentNode.replaceChild(iframe, this);
};
}
}
As you create it onload, just create a html tag:
<iframe src="https://www.youtube.com/embed/yourid"/>
Or use javascript, as there is only 1 should be loaded as default:
window.onload = function(){
var videos = document.getElementsByClassName("youtube");
if (videos.length > 0){
var youtube = videos[0];
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + youtube.id);
// The height and width of the iFrame should be the same as parent
iframe.style.width = youtube.style.width;
iframe.style.height = youtube.style.height;
iframe.style.clear = 'both';
// Replace the YouTube thumbnail with YouTube HTML5 Player
youtube.parentNode.replaceChild(iframe, youtube);
}
}
Another case, if you need to keep the onclick and load 1 video by default, just keep your code and write some more lines:
window.onload = function(){
var videos = document.getElementsByClassName("youtube");
if (videos.length > 0){
var youtube = videos[0]; //play the first video onload
youtube.click(); //trigger click programmatically, this will cause the event handler to be executed and insert an iframe.
}
}
Related
I am using the below code in a WordPress editor. With my current code when I click on the image the actual video shows up, and I have to click the video again to play it.
I want to change it so that an image of the video is displayed and when I click on that the video should start to play. I just have to click once. Right now I have to click twice which is bad user experience. This is required to reduce page load time.
<div class="youtube" id="PpMS2SP_3Fs" style="width:100%; height: 600px;"></div>
<script>
var videos = document.getElementsByClassName("youtube");
for (var i = 0; i < videos.length; i++) {
var youtube = videos[i];
var img = document.createElement("img");
img.setAttribute("src", "https://www.sociosquares.com/wp-content/uploads/2019/04/vid-img1-opti.jpg");
img.setAttribute("class", "thumb");
var circle = document.createElement("div");
circle.setAttribute("class", "circle");
youtube.appendChild(img);
youtube.appendChild(circle);
youtube.onclick = function() {
var iframe = document.createElement("iframe");
iframe.setAttribute("src", "https://www.youtube.com/embed/" + this.id + "?autoplay=1&loop=1&playlist=PpMS2SP_3Fs");
//"https://www.youtube.com/embed/PpMS2SP_3Fs?autoplay=1&loop=1&playlist=PpMS2SP_3Fs");
iframe.style.width = this.style.width;
iframe.style.height = this.style.height;
this.parentNode.replaceChild(iframe, this);
};
}
</script>
I expected the video to autoplay after a click on the image, but it doesn't, and I have to click again to play the video.
jQuery('#image_id').click(function() {
jQuery(".youtube").attr('src', jQuery(".youtube", parent).attr('src') + '?autoplay=1');
});
image_id is your image element id you are clicking and youtube is the class of the iframe your embed has.
I am lazy loading Wistia videos and they are injected into the DOM after a click of an image. I am trying to get handles on the videos in order to pause videos when a new video starts playing, but Wistia API callback is not firing.
function getAllVideos() {
window._wq = window._wq || [];
console.log(window._wq)
window._wq.push({
id: "_all",
onEmbedded: function(video) {
console.log('inside ready');
}
})
console.log(window._wq)
}
I am always receiving an empty array. Wistia.api.all() also returns an empty array. It might be because of async? I am injecting the iframe by making a call to the Wistia api like so:
$slide.getJSON('http://fast.wistia.com/oembed/?url=http://home.wistia.com/medias/' + embed + '&format=json')
.then(res => {
var thumbnail = new Image(); // create image to hold thumbnail
thumbnail.src = res.thumbnail_url; // set thumbnail source
var videoContainer = document.getElementById('slick-slide0' + i); // each slide get video container
videoContainer.appendChild(thumbnail);
videoContainer.innerHTML += '<div class="play-button"></div>';
var slider = document.getElementById('slick-slide-control0' + i);
// on click of each image, create iframe, remove image, insert iframe
videoContainer.addEventListener('click', function() {
var iframeEmbed = document.getElementById('{{parent_custom_widget_name}}_' + i).innerHTML;
var iframe = document.createElement('iframe');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('allowfullscreen', 'true');
iframe.setAttribute('src', '//fast.wistia.net/embed/iframe/' + iframeEmbed + '?autoplay=true');
this.innerHTML = '';
this.appendChild(iframe);
getAllVideos();
});
});
You can create object of wistia using
var wistiaObj = Wistia.api("<id_of_wistia_tag>");
After that you can call function,
wistiaObj.play();
wistiaObj.time();
you can refer this: https://wistia.com/support/developers/player-api
Hope it helps you.
We have a website that loops through a playlist of Vimeo IDs, embedding an iFrame player until the video is done playing, destroying said I frame and starting over with the next video id. This seemingly works fine but stops working after an arbitrary number of idle hours. Our tests have been made in Chrome 59 on OSX. Here is a screenshot of the kind of errors that end up in our console.
As this is my first post, here's the link to the screenshot
We're not sure what could be causing this. Any help will be greatly appreciated!
EDIT: Here's the Javascript responsible for creating/destroying iframes. Also, the project is using AngularJS but I don't think it's relevant. :
var iframe_wrap = document.getElementById('player-wrap');
var iframe = document.getElementById('player');
var player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', onFinish);
});
function onFinish() {
// Remove current iframe
iframe.parentNode.removeChild(iframe);
iframe = null;
player = null;
// Video increment
if((ctrl.currentVideo + 1) < ctrl.currentPlaylist.length) {
ctrl.currentVideo += 1;
}
else {
ctrl.currentVideo = 0;
}
// Create new iframe
var newPlayer = '<iframe id="player"
src="'+ctrl.currentPlaylist[ctrl.currentVideo].urlVimeo+'"
frameborder="0" webkitallowfullscreen mozallowfullscreen
allowfullscreen></iframe>';
if(ctrl.currentPlaylist[ctrl.currentVideo].contentType =='scenario'){
iframe_wrap.innerHTML = newPlayer;
}
iframe = document.getElementById('player');
player = $f(iframe);
player.addEvent('ready', function() {
player.addEvent('finish', onFinish);
});
$scope.$apply();
}
I have got a
<input type="file" id="howtovideo" name="howtovideo" accept="video/mp4"> </span>
When its changed , i am calling the below function to play video dynamically
$("#howtovideo").on('change', function() {
loadVideo();
});
function loadVideo(){
alert('loadVideo called');
var newsrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
var video = document.getElementById('video');
var source = document.createElement('source');
source.setAttribute('src', newsrc);
video.appendChild(source);
video.play();
}
But nothing is happening and there are no errors in console demo.
Could you please let me know how to play vdeo dynamicaly ??
You don't need to add new source tag. Only set address of new video to src attribute of current source tag. Note that after changing src, you need to load video using .load() and then play video. Also if you have jQuery, use it to finding elements.
$("#howtovideo").on('change', function(){
loadVideo();
});
function loadVideo(){
var newsrc = 'http://clips.vorwaerts-gmbh.de/VfE_html5.mp4';
$('#video > source').attr('src', newsrc);
$("#video")[0].load();
$("#video")[0].play();
}
I have a web application in which I have a bunch of iFrame from with source from other tools.
Now the user should have the possibility to open the iframe content in a new window / new tab, normaly I would simply add something like this:
function onButtonClick() { var src = $('#iframe').prop('src');
windows.open(src, "_blank"); }
But his would only open a new version of my iFrame context, e.g. if a user open a page in the iframe or clicked on something and javascript changed something within my iframe, the user would be loosing this value..
So, can I make a iframe Content to a new window content without loosing the dynamic state of the website within my iframe?
You cannot move around iframes between different windows without reloading, because the spec says the attributes must be reevaluated:
When an iframe element is inserted into a document that has a browsing context, the user agent must create a nested browsing context, and then process the iframe attributes for the "first time".
-- https://html.spec.whatwg.org/multipage/embedded-content.html#the-iframe-element
(via https://bugzilla.mozilla.org/show_bug.cgi?id=254144#c97)
Old answer:
// edit: Does not work as expected, since the iframe is reloaded on move and the original src is restored.
It is easy enough if you move the iframe out of the current page:
<button id="example-button">open in new window</button>
<div id="example-container">
<iframe id="example-iframe" src="https://example.com/">
</iframe>
</div>
document.getElementById('example-button').addEventListener('click', function (ev) {
ev.preventDefault();
var win = open('about:blank');
var iframe = document.getElementById('example-iframe');
// the popup might not be immediately available:
setTimeout(function () {
var body = win.document.body;
body.style.padding = 0;
body.style.margin = 0;
body.appendChild(iframe);
iframe.style.position = 'fixed';
iframe.style.padding = 0;
iframe.style.margin = 0;
iframe.style.width = '100%';
iframe.style.height = '100%';
iframe.style.border = 0;
}, 0);
// move the iframe back if the popup in closed
win.addEventListener('beforeunload', function () {
document.getElementById('example-container').appendChild(iframe);
iframe.style.position = '';
iframe.style.padding = '';
iframe.style.margin = '';
iframe.style.width = '';
iframe.style.height = '';
iframe.style.border = '';
});
});
Example: http://jsfiddle.net/cpy2jykv/1/