All the following code is work successfully to get youtube playlist and display it with no problem. But I can't play any video from this list using angular js.
Angular JS
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope, $http) {
//contentDetails - snippet
$http.get('https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=50&playlistId=PLlMsyZB0poTDYImmOliKyiC-jpAFUsr6X&key=AIzaSyDGm1uzuqPPUGzG-qN7u6gTaS8ApXBJYvw')
.then(function (response) {
$scope.records = response.data.items;
});
$scope.PlayFun = function (Val) {
var Vid_ID = Val;
var New_Vid = "<iframe width='450' height='283' src='https://www.youtube.com/embed/" + Vid_ID + "?autoplay=1&loop=1&rel=0&wmode=transparent' frameborder='0' allowfullscreen wmode='Opaque'></iframe>";
var Vid_Elm = document.getElementById("video");
Vid_Elm.setAttribute("crs", New_Vid);
};
});
HTML
<iframe id="video" style="position:fixed;top:150px;right:50px;" width="420" height="315" src="//www.youtube.com/embed/9B7te184ZpQ?rel=0" frameborder="0" allowfullscreen></iframe>
<br />
<ul data-ng-app="myApp" data-ng-controller="myCtrl">
<li data-ng-repeat="x in records">
<img class="img-thumbnail" style="width:100px; height:80px;"
src="{{x.snippet.thumbnails.default.url}}" />
<br />
<input data-ng-click="PlayFun(x.snippet.resourceId.videoId)" type="button" value="{{x.snippet.title}}" />
</li>
</ul>
My problem specifically is in "$scope.PlayFun" where I can't run a video from the list by video id using angular js.
My approach is to change iframe html on ng-click to pass new selected Vid_ID and to make it "autoplay=1" put it doesn't work.
You can set the src of the iframe to ng-src like so:
<iframe id="video" style="position:fixed;top:150px;right:50px;" width="420" height="315" ng-src="{{videoSource}}" frameborder="0" allowfullscreen></iframe>
And in your controller you simply change the url of video source and it will automatically change the video source. You do need to trust as resource url though for security (which means injected $sce as well)
$scope.videoSource = $sce.trustAsResourceUrl("//www.youtube.com/embed/9B7te184ZpQ?rel=0");
Working PLunker demo
Related
I have a javascript file that displays a variable number of videos embedded from youtube and displayed in a grid.
I need the users to be able to select one video and click submit where I will will store the src link of that video in a variable.
Below is the related javascript portion:
playListItems.forEach(item => {
const videoId = item.snippet.resourceId.videoId;
output += `
<div class="col s3">
<iframe width="100%" id="videoFrame" height="auto"
src="https://www.youtube.com/embed/${videoId}?rel=0" frameborder="0" encrypted-media" >
</iframe></div>
`;
}
HTML:
<form id="form1">
<div class="input-field">
<input type="submit" id="but1" value="Save Selection">
</div>
</form>
How do I do that using an event handler or any other possible solution?
why not use const videoId as the id of each iframe? Because you can't use an id more then once. Then in an onclick handler of each iframe element you can fire a function that sets the value of <input type="submit" id="but1" value="Save Selection"> to this.id.
Like so:
playListItems.forEach(item => {
const videoId = item.snippet.resourceId.videoId;
output += '<div class="col s3">
<iframe width="100%" id="${videoId}" height="auto"
src="https://www.youtube.com/embed/${videoId}?rel=0" frameborder="0" encrypted-media" onclick='submitVid(this.id);'>
</iframe></div>';
}
Then the submitVid(video) function will look something like this:
function submitVid(video) {
//the video variable will hold this.id or the videoId
//Here you can do whatever you want with video.
//Full video id:
var url = "https://www.youtube.com/embed/" + video + "?rel=0";
//pass value to a textfield to submit
document.getElementById("textfield").value = video;
}
A better is to just store the videoId and not the full url. It saves space and it is faster.
Hope this helps! If not, please comment
try some_var = document.getElementById("videoFrame").src
I have tried to make a youtube interface to play music, but I want to change the music so I've made this script. The problem is, when I change the link the video won't work anymore and it gives me an error.
<iframe id="iframe" width="500" height="315" src="https://www.youtube.com/embed/SHFTHDncw0g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
<input type="text" name="link" id="link" size="40">
<input type="button" value="Play" onclick="changeLink();">
<script>
function changeLink() {
var changeLink = document.getElementById("link").value;
document.getElementById("iframe").src += changeLink;
}
</script>
You are adding a new link instead of replacing, because you used += instead of = in your Javascript. As a result, you have 2 links concatenated.
Try replacing:
document.getElementById("iframe").src += changeLink;
With this:
document.getElementById("iframe").src = changeLink;
How can I replace a video embedded in an iframe using JavaScript or jQuery?
My HTML is:
<iframe src="https://openload.co/embed/7Cq9AdeLtL0/" allowfullscreen="true"
id="bigframe" frameborder="0"></iframe>
<a data-link="https://openload.co/embed/5xTolN_ejRI/">openload</a>
And the other video source should be in the <a> tag so when I click the word "openload", it will change the video source to the second source and another think I need to do this in multiple posts with a variable video
You don't need any JavaScript.
Give the iframe a name ex. <iframe src='about:blank' name='vid'....
Next, give each link a target attribute withe the value of the iframe's name. ex. <a href='path/to/video.mp4' target='vid'...
Demo
Doesn't work here, go to this Plunker for a working demo
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4' target='vid'>1</a>
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005610.mp4' target='vid'>2</a>
<a href='http://media6000.dropshots.com/photos/1381926/20170326/005611.mp4' target='vid'>3</a>
<iframe src='about:blank' name='vid' width='320' height='180'></iframe>
It is batter to play video using html video tag instead iframe .You can do it with jquery like below
html
<a data-link="https://openload.co/embed/5xTolN_ejRI/" href="#">Video 1</a>
<a data-link="https://openload.co/embed/5xTolN_ejRI/" href="#">Video 2</a>
<video width="320" height="240" controls>
<source src="https://openload.co/embed/5xTolN_ejRI" type="video/mp4">
Your browser does not support the video tag.
</video>
JS
$(document).ready(function(){
// set video srs
$('a').click(function(){
$("video").html('<source src="'+$(this).data('link')+'"></source>' );
});
});
const iFrame = document.querySelectorAll("iframe");
// console.log(iFrame)
iFrame.forEach((item, index) => {
let src = item.src;
const newItem = document.createElement("video");
newItem.style = "width:640px; height:360px";
newItem.src = src;
item.parentNode.replaceChild(newItem, iFrame[index]);
newItem.setAttribute("class", "iframe-video-tag-" + index);
newItem.setAttribute("controls", "true");
let videoTag = document.getElementsByClassName("iframe-video-tag-" + index);
videoTag.src = src;
});
I have this string which arrives from the server side.
<iframe scrolling="no" frameborder="0" allowtransparency="true" height="250" width="300" style="border:0;" src="http://cdn.castplatform.com/scripts/au1324.html?subid=6e6c4c9092a4fd311393cd770c71ff05"></iframe>
I want to present the html rendered.
When using $sce.trustAsHtml I get on the view:
<iframe scrolling="no" frameborder="0" allowtransparency="true" height="250" width="300" style="border:0;" src="http://cdn.castplatform.com/scripts/au1324.html?subid=6e6c4c9092a4fd311393cd770c71ff05"></iframe>
I would expect to get the html rendered (see picture) and not just the html stripped from the escape characters (as above):
What am I'm missing here?
Here is the js code:
$scope.field_value = $sce.trustAsHtml($sanitize(field_value));
and the view code:
<div ng-bind-html="field_value"></div>
Thanks.
You need another decoding step (copied from https://stackoverflow.com/a/31290632/3563439):
app.filter('trusted', ['$sce', function($sce) {
var div = document.createElement('div');
return function(text) {
div.innerHTML = text;
return $sce.trustAsHtml(div.textContent);
};
Fiddle: http://jsfiddle.net/masa671/8kphL7xe/
I am trying to change a YouTube video iframe source with jQuery, but looks like running into cross origin issue. My jquery code:
var videourl = $(".videourl").html();
$(".actualyoutube iframe").attr('src',videourl);
iframe gets new src value, but no video is displayed. Any ideas?
extended explanation:
There is a popup div with embeded youtube video
<div class="youtubepopup">
<div class="closeyoutube">X</div>
<div class="actualyoutube">
<iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
There is a certain td which contains a new src url. There is no other place or way to get this url except from this td.
<td class="videourl">//youtube.com/whatevervideo</td>
And there is a script that should add src on open popup and remove on closing.
var videourl = $(".videourl").html();
$(".youtubecap").click(function() {
$(".actualyoutube iframe").attr('src', videourl);
$(".youtubepopup").fadeIn('slow');
});
$(".closeyoutube").click(function() {
$(".youtubepopup").fadeOut('slow');
$(".actualyoutube iframe").removeAttr('src');
});
$(".youtubepopup").click(function() {
$(".youtubepopup").fadeOut('slow');
});
p.s. now that i laid it out, user3385530 is probably right
You cannot show pages from www.youtube.com inside an iframe. The correct way is to use their video embed codes inside your web page. IFrame embeds are easier, the URL you need to display in an iframe looks like this:
http://www.youtube.com/embed/VIDEO_ID_GOES_HERE
Just place an iframe such as this inside your web page:
<div class="actualyoutube">
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID_GOES_HERE" frameborder="0" allowfullscreen></iframe>
</div>
Finally, assuming you are able to extract video id from the URLs using jQuery, you can use this to display videos*:
var videoid = "S2ISrpNM-0s";
$(".actualyoutube iframe").remove();
$('<iframe width="420" height="315" frameborder="0" allowfullscreen></iframe>')
.attr("src", "http://www.youtube.com/embed/" + videoid)
.appendTo(".actualyoutube");
* Changing the src property of an iframe that is already displaying a YouTube video did not work; I therefore suggest destroy-iframe-recreate-iframe approach.
<div class="service-video-media">
<iframe id="main-play" width="560" height="315" src="https://www.youtube.com/embed/uTcj2v85y34" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class="video-list">
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
<img src="https://img.youtube.com/vi/uTcj2v85y34/1.jpg" video-id="uTcj2v85y34" />
<img src="https://img.youtube.com/vi/jRuR4GaSsBI/1.jpg" video-id="jRuR4GaSsBI" />
<img src="https://img.youtube.com/vi/ec7aQPLSBsU/1.jpg" video-id="ec7aQPLSBsU" />
</div>
</div>
<script>
jQuery(document).ready(function(){
jQuery('.video-list img').on('click',function () {
var videoId = jQuery(this).attr('video-id');
var videoUrl = 'https://www.youtube.com/embed/'+videoId;
jQuery('#main-play').attr('src',videoUrl);
});
});
</script>
This will not work because page is parsed and only on refresh with new ulr will happen.
You need to use ajax to pre-load the page with new url and then to set iframe.