Rendering Youtube Video in a WYSIWYG - javascript

I am creating a custom WYSIWYG from scratch using JavaScript. All of it is working fine (like inserting pictures), but when I click on submit and the content gets added to my database, the YouTube video gets inserted like this:
<div><br></div><div><br><div><br></div></div>
I have created a JavaScript file that the WYSIWYG parses to:
function iImage(){
var imgSrc = prompt('Enter image location', '');
if (imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
function submit_form(){
var theForm = document.getElementById("blogForm");
theForm.elements["blogbody"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}
You can see that my iImage function works, but not my iVideo.
Can anyone help?
Just to let you know i have edited my script to this...
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("http://www.youtube.com/watch?v=", "http://www.youtube.com/embed/");
var embed = '<iframe src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390"></iframe>';
if($.browser.msie){
richTextField.document.createRange().pasteHTML(embed);
}else{
richTextField.document.execCommand("Inserthtml", false, embed);
}
}
but still no joy

I have got it. This is the code below
function iVideo(){
var urlPrompt = prompt("Enter Youtube Url:", "http://");
var urlReplace = urlPrompt.replace("watch?v=", "embed/");
var embed = '<iframe title="YouTube video player" src="'+urlReplace+'" allowfullscreen="true" width="480" frameborder="0" height="390">';
if(embed != null){
richTextField.document.execCommand("Inserthtml", false, embed);`
}
}
It working on my sites right now.

Ultimate
The reason you don't see a Youtube.com is because it will be added by you upon uploading. In the form where you write content you intend to upload to your site, You are to click on a Add Video link which will tricker off the first line in the code to popup a window requesting you to submit your Youtube video link, which looks something like http://youtube.com/theVideoLink. The link you add will then be placed where you have src="'+urlReplace+'" that is.

Well, I am a begginner at javascript, but I don't see anywhere were it adds youtube.com to it, all I see is the watch?v=.
As I said, a beginners opinion.

Are you able to first try a hardcoded/static version like below first?
- might be just syntax or one of your variables not set.
<script type="text/javascript">
function iVideo(){
var youtubeiframe='<iframe type="text/html" width="640" height="385" src="http://www.youtube.com/embed/AsbagZvkrbo" frameborder="0"></iframe>';
richTextField.document.execCommand ("insertHTML", false, youtubeiframe);
}
</script>

Related

I need to open 4 Bootstrap modals (4.1 version) and autoplay a different Vimeo video on each one of them

I've been using this solution by Franceso Borzi:
var videoSrc = $("#myModal iframe").attr("src");
$('#myModal').on('show.bs.modal', function () { // on opening the modal
// set the video to autostart
$("#myModal iframe").attr("src", videoSrc+"&autoplay=1");
});
$("#myModal").on('hidden.bs.modal', function (e) { // on closing the modal
// stop the video
$("#myModal iframe").attr("src", null);
});
FYI: This snippet can be found on this thread: Bootstrap Modals & Youtube: Autoplay and Stop on Close:
It works when there is only one Vimeo video on the page. When I try to open a different video for each modal, the modals only play the latest video on the markup.
This is my code so far:
<div class="modal" data-modal-window id="modal-vimeo-01">
<iframe id="v01" src="https://player.vimeo.com/video/726139458?h=02e309cac8" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<button data-modal-close class="close" data-dismiss="modal" aria-label="Close"><i class="icofont-close-circled"></i></button>
</div>
<div class="modal" data-modal-window id="modal-vimeo-02">
<iframe id="v02" src="https://player.vimeo.com/video/723317173?h=8ce2334289" width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
<button data-modal-close class="close" data-dismiss="modal" aria-label="Close"><i class="icofont-close-circled"></i></button>
</div>
<script>
var videoSrc = $("#modal-vimeo-01 iframe").attr("src");
$('#modal-vimeo-01').on('show.bs.modal', function () { // on opening the modal
// set the video to autostart
$("#modal-vimeo-01 iframe").attr("src", videoSrc+"&autoplay=1");
});
$("#modal-vimeo-01").on('hidden.bs.modal', function (e) { // on closing the modal
// stop the video
$("#modal-vimeo-01 iframe").attr("src", null);
});
</script>
<script>
var videoSrc = $("#modal-vimeo-02 iframe").attr("src");
$('#modal-vimeo-02').on('show.bs.modal', function () { // on opening the modal
// set the video to autostart
$("#modal-vimeo-02 iframe").attr("src", videoSrc+"&autoplay=1");
});
$("#modal-vimeo-02").on('hidden.bs.modal', function (e) { // on closing the modal
// stop the video
$("#modal-vimeo-02 iframe").attr("src", null);
});
</script>
I'm quite new to JS and Jquery, so any help would be much appreciated.
Thanks!
You problem will be most likely that you have 4 modals/videos that have the same class or id. Since I can't see your code I can't tell you where your mistake is, but that will be the problem for sure.
You should try it with having 4 id`s for your modals (like #modal1, #modal2, etc.) and and make sure that you select the correct video source, which you do in the first line:
var videoSrc = $("#myModal iframe").attr("src");
You would need something like
$("#modal1 iframe")
$("#modal2 iframe")
$("#modal3 iframe")
$("#modal4 iframe")
If this is not helping you, then you need to post your code. Because the code you posted is fine.
EDIT:
You are reacreating / overriding the videoSrc variable. You need to use unique names for these.
var videoSrc1 = $("#modal-vimeo-01 iframe").attr("src");
var videoSrc2 = $("#modal-vimeo-02 iframe").attr("src");
var videoSrc3 = $("#modal-vimeo-03 iframe").attr("src");
var videoSrc4 = $("#modal-vimeo-04 iframe").attr("src");
The problem is with the scope of videoSrc
You set the value to src of the iframe of the first video
Then in the second script, you redefine videoSrc to be the src of the second iframe
The scope of videoSrc in both cases is the same.
These are equivalent:
- var videoSrc = “someUrl”;
- window.videoSrc = “someUrl”
So in your second script, videoSrc gets overwritten.
Each modal should have its own uniquely named source variable.
Edit: in order to handle this properly, you would do something like this:
var firstModalSrc = $(firstModalID iframe).attr(src)
$(firstModalID).on(…)
var secondModalSrc = $(secondModalID iframe).attr(src)
$(secondModalD).on(…)
…

Add video to page on Button click

I am a beginner JS user, and I am trying to get a video to play on fullscreen and replace an invisible div further down on the page. I started with a guide from Chris Ferdinandi.
In his guide, the video replaces the image that is clicked. I would like to have the div later down on the page to be replaced on the click.
Any guidance would be great!
HTML
<a data-video="480459339" class="stylsheetref" href="#" target="">Watch the Tour</a>
<div id="video-replace"></div>
Javascript (modified from this guide)
<script>
if (!Element.prototype.requestFullscreen) {
Element.prototype.requestFullscreen = Element.prototype.mozRequestFullscreen || Element.prototype.webkitRequestFullscreen || Element.prototype.msRequestFullscreen;
}
// Listen for clicks
document.addEventListener('click', function (event) {
//Set invisible Div (new code added by me)
var videonew = '#video-replace');
// Check if clicked element is a video link
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="960" src="https://player.vimeo.com/video/' + 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, videonew);
// Enter fullscreen mode
video.requestFullscreen();
}, false);
</script>
There are problems in your code.
var videonew = '#video-replace'); there's an orphan ), since you are using this in the `replaceChild``method I assume you want the variable to reference to an element.
So change it to
var videonew = document.querySelector('#video-replace');
Pro tip: Using the Developer console during development can help you figure out such errors in your code.

Youtube Script Delay

I have a script that will pull the latest video from a youtube channel and embed it to my school page. It works but there are two issues.
One it doesn't immediately identify a recently posted video. Is there a delay from youtube before it syncs and the new posts can register?
Two the script runs but it does stop other video content on the page from displaying. Any idea why that might be?
I've looked it over and over and exhausted any searches I could think of.
Thanks for the help! Here is the code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<iframe id="youtube_video" width="400" height="215" frameborder="0" allowfullscreen></iframe>
<script>
var channelID = "UC0gcWgeEVOE7TDEKtLNnSuA";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D'+channelID, function(data) {
var link = data.items[0].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video").attr("src","https://youtube.com/embed/"+id + "?controls=1&showinfo=0&rel=0");
});
</script>
I am not 100% clear on what you are trying to achieve - but if you are trying to display MORE than 1 video, you currently only have a single #youtube_video element. Rather you would likely need to create an element for each index of the data array and create unique IDs such as
#youtube_video + link[i]
here's a Fiddle:
https://jsfiddle.net/e620tuy8/
var channelID = "UC0gcWgeEVOE7TDEKtLNnSuA";
$.getJSON('https://api.rss2json.com/v1/api.json?rss_url=https%3A%2F%2Fwww.youtube.com%2Ffeeds%2Fvideos.xml%3Fchannel_id%3D' + channelID, function(data) {
var container = $('.container');
for (var i = 0; i < data.items.length; i++) {
var link = data.items[i].link;
var id = link.substr(link.indexOf("=") + 1);
var iframe = '<iframe id="youtube_video_id_' + i + '" src="https://youtube.com/embed/' + id + '?controls=1&showinfo=0&rel=0" width="400" height="215" frameborder="0" allowfullscreen></iframe>'
container.append(iframe)
}
});
Found, the answer with a little more digging.
Thanks to Frank's answer here https://stackoverflow.com/a/43873099/5943182
Thank you to anyone who viewed.
I still don't know why the most recent wasn't being pulled in the above code, but the alternative method works wonderfully for me.

Set video embedded in page to autoplay or not, based on query string?

Is it possible to set a video embedded on a page to autoplay based on a query string on the URL of the page it's embedded on?
For instance, if I have a page at bla-blah.web/interthingy.html with a Vimeo embed, is it possible to make it so bla-blah.web/interthingy.html?play or bla-blah.web/interthingy.html?play=true so that the Vimeo embed contained within that page autoplays?
Basically something that reads the URL, and sets the embedded video to autoplay based on whether it has a specific query string.
My apologies if this has been asked and answered elsewhere; I can't seem to find anything on it.
A solution can be based on the window.location.search.
Using the split and filter it's possible to search the query parameter play and its value.
If this parameter exists and the value is not specified or true it's possible to play the Vimeo video:
var playParams = window.location.search.split('&').filter(function(ele, index) {
var tmpArr = ele.split('=');
if (tmpArr[0] == '?play' || tmpArr[0] == 'play') {
if (tmpArr.length == 2) {
return tmpArr[1] == 'true';
}
return true;
}
});
if (playParams.length > 0) {
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.play();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

javascript turn a YouTube link into embed video

I Have Many Links On My Page All Jotted Around In Random Places. If Have The Links Like This:
https://youtu.be/4tG274QuqHM
or
https://youtube.com/watch?v=4tG274QuqHM
or
Any Other YouTube Video Link Format
Is There Any Way In JavaScript To Get Any Form Of YouTube Link And Turn It Into A YouTube Embed Iframe, By Using JavaScript To Make It End Up Looking Like This;
<iframe width="420" height="345" src="http://www.youtube.com/embed/4tG274QuqHM?autoplay=0&autohide=1&controls=2&rel=0" frameborder="0" allowfullscreen="true"></iframe>
Could Anyone Fix This Code To Make It Work???
$(document).ready(function() {
$('a').each(function() {
var matches = $(this).attr("href").match(/^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/);
if(matches){
$(this).attr("class","youtube-link");
}
});
$('a.youtube-link').each(function() {
var yt_url = this.href,
yt_id = yt_url.split('?v=')[1],
yt_id = yt_url.split('embed/')[1],
yt_title = $(this).text();
$(this).replaceWith('<iframe style="max-width:560px;max-height:315px;" width="600" height="600" src="http://www.youtube.com/embed/' + yt_id + '?rel=0" frameborder="0" allowfullscreen></iframe>');
});
});
I would check this link out. It's Google's documentation on a Youtube iFrame.
https://developers.google.com/youtube/player_parameters#Embedding_a_Player
You can simply extract the href value on click on the anchor tag and replace the existing anchor tag with a iframe tag.
https://youtube.com/watch?v=4tG274QuqHM
<br>
http://www.youtube.com/embed/XGSy3_Czz8k
<script>
$('a').click(function(e)
{
var target = $(this).attr('href');
var iframe = $('<iframe/>',{ width: "420", height: "315" , src : target});
$(this).replaceWith(iframe);
e.preventDefault();
});
</script>
Example : https://jsfiddle.net/4nqhqu03/

Categories