<div class="container">
https://youtu.be/_32C_wVWEF0
</div>
div class(video-container) is not created
I want to create a div class (video-container) where I want.
please help fix the code. ðŸ˜
Find the link in the text and convert it to the embed code
Please let me know if there is any other way.
<script>
function youtubeParser(url, ...young) {
console.log(url);
const container = `
<div class="video-container" style="width: 100%; height:100%">
<iframe width="560"
height="315"src="https://www.youtube.com/embed/#ID#?rel=0&controls=0"
title="YouTube video player"
frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen; ></iframe>
</div>`;
return young && young[6].length == 11
? container.replace("#ID#", young[6])
: url;
}
const content = document.querySelector("body");
const youtubeUrlExp = /(http:|https:)?(\/\/)?(www\.)?
(youtube.com|youtu.be)\/(watch|embed)?(\?v=|\/)?(\S+)?/g;
const wrappedContent = content.innerHTML.replace(youtubeUrlExp,
youtubeParser);
content.innerHTML = wrappedContent;
</script>
Related
I want a random number behind ?i=
<li>
<strong> Clip</strong> 2<br>
<iframe src="https://mysite.ml/links/clip2.html?i=" height="350" width="600" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
</li>
First, make sure your iframe has an id attribute, for example:
<iframe id="myrandomiframe" src="" height="350" width="600" frameborder="0" scrolling="no" allowfullscreen="true"></iframe>
Then onpageload, use JavaScript to set the src attribute with Math.random() appended, For example:
document.getElementById("myrandomiframe").setAttribute("src","https://mysite.ml/links/clip2.html?i=" + Math.random());
You'll have to do this when the page loads with JavaScript.
window.addEventListener('load', function(){
document.getElementsByTagName("iframe")[0].src += rando(Number.MAX_SAFE_INTEGER);
console.log(document.getElementsByTagName("iframe")[0].src);
});
<script src="https://randojs.com/1.0.0.js"></script>
<iframe src="example.com/?i="></iframe>
If you need to delve deeper into any of this, I used randojs.com to pick a number between 0 and Number.MAX_SAFE_INTEGER.
I want to show one out of two iframe, according to user OS.
if user use iOS it shows one and if androind it show other.
<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>
you could detect userAgent in Javascript, like this.
<html>
<body>
<div id="vectary"></div>
<script>
function getOs() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if (/android/i.test(userAgent)) {
//Vectary iframe 1 - for Android
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
// iOS detection from: http://stackoverflow.com/a/9039885/177710
if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
//Vectary iframe 2 - for iOS
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
//Vectary iframe 3 - for all other cases
return '<iframe id="e8e2c112-f7ce-4d21-96e7-59729619a527" src="https://www.vectary.com/viewer/v1/?model=e8e2c112-f7ce-4d21-96e7-59729619a527" frameborder="0" width="50%" height="480"></iframe>';
}
document.getElementById("vectary").innerHTML = getOs();
</script>
</body>
</html>
I am trying to display the lastest five videos from my youtube channel on one HTML page. I have managed to successfully embed one youtube video with this code but I am unable to upload any other one. I have tried to embed the second latest video as well but no matter what I try, I get a playback error with invalid ID as seen above. Does anyone have a clue how I could embed the latest 5 videos from my YouTube Chanel in JSON/JavaScript?
Below is my code
var channelID = "MY-ID";
var reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
$.getJSON("https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(reqURL)+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=0&showinfo=0&rel=0");
});
<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
I Found It you have to change the number in the []'s.
var channelID = "MY-ID";
var reqURL = "https://www.youtube.com/feeds/videos.xml?channel_id=";
$.getJSON("https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(reqURL)+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=0&showinfo=0&rel=0");
var link = data.items[1].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video2").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
var link = data.items[2].link;
var id = link.substr(link.indexOf("=")+1);
$("#youtube_video3").attr("src","https://youtube.com/embed/"+ id + "?controls=0&showinfo=0&rel=0");
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<iframe id="youtube_video" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<iframe id="youtube_video2" width="600" height="340" frameborder="0" allowfullscreen></iframe>
<iframe id="youtube_video3" width="600" height="340" frameborder="0" allowfullscreen></iframe>
I want to scrape videos from a web page, but in that page has two's iframe tag..
one for show Facebook page, one the other one is for embed video.
I just want to take the video URL from that..
But when I try to scrape that i got all iframe..
Like this:
url_videos = requests.get(link_to_video)
video_link = BeautifulSoup(url_videos.text, 'html.parser')
video_on_iframe = video_link.find('iframe')
print(video_on_iframe)
and when I try to run the code above I got this result:
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
<iframe frameborder="0" height="380" scrolling="no" src="http://www.mp4upload.com/embed-q7xxgge1yu1c.html" type="text/html" width="640">
</iframe>
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
<iframe allow="encrypted-media" allowtransparency="true" frameborder="0" height="80" scrolling="no" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FAnimeindoFans%2F&tabs&width=280&height=180&small_header=true&adapt_container_width=true&hide_cover=true&show_facepile=false&appId=123434497681677" style="border:none;overflow:hidden" width="280"></iframe>
I don't need that Facebook iframe, I just need the video URL from other iframe with attribute height="380" and width="280"
When I try to specify more details in find() method like this:
video_on_iframe = video_link.find('iframe', width=640, height=380)
I got this:
None
None
None
<iframe frameborder="0" height="380" scrolling="no" src="http://www.mp4upload.com/embed-q7xxgge1yu1c.html" type="text/html" width="640">
</iframe>
None
None
An iframe elements and None in the others..
So.. my question is how to just find all iframe', width=640, height=380 value and skip the None result in the others..?
You could also require src attribute to be present:
video_on_iframe = video_link.find('iframe', src=True)
Or, combined with checks for width and height:
video_on_iframe = video_link.find('iframe', src=True, width=640, height=380)
You can use find_all to find all videos with that dimensions and with the src attribute.
video_on_iframe = [video["src"] for video in video_link.find_all('iframe', width=640,
height=380, src=True)]
print(video_on_iframe)
[u'http://www.mp4upload.com/embed-q7xxgge1yu1c.html']
[Finished in 0.2s]
video_on_frame = video_link.find_all('iframe', height = '380')##Â This means I wanna scrape iframe who has height value 380 . You can also use widht.
link_array = []
for link in video_on_frame: ## Your html has 1 iframe in video_on_frame format.
get_iframe_url = link['src'] ## find iframe's src
try:
link_array.append(get_iframe_url) ## add src into a array
except:
link_array.append('Error')
print(link_array) will show your url what you want
<html>
<head>
<script type = "text/javascript">
function changeone() {
parent.document.getElementByID("frame2").src= "www.MyWebsite.com"
}
</script>
</head>
<body>
<iframe id= "frame1" src= "CustomPageCreated.html" width="300" height="500" frameborder="1" scrolling="auto" onload = changeone() > </iframe>
<iframe id= "frame2" width="300" height="500" frameborder="1" scrolling="auto" > </iframe>
</body>
</html>
The custom page loads in the frame but the www.mywebsite.com does not load in the 2nd frame, Is there anything wrong with the code.
Your DOM probably hasn't fully loaded. In addition to the changes #sroes mentioned, try putting the script tag right before the closing </body> tag. The following works for me.
<iframe id="frame1" style="width:400px;height:400px;" onLoad="loadSite2();"></iframe>
<iframe id="frame2" style="width:400px;height:400px;"></iframe>
<script>
var site1 = 'http://rice.edu',
site2 = 'http://bing.com';
function loadSite2() {
document.getElementById('frame2').src = site2;
}
document.getElementById('frame1').src = site1;
</script>
Try to remove parent. and change document.getElementByID to document.getElementById:
document.getElementById("frame2").src= "http://www.MyWebsite.com"
Edit:
Also make sure you add quotes to the onload attribute:
<iframe id= "frame1" src= "CustomPageCreated.html" width="300" height="500" frameborder="1" scrolling="auto" onload="changeone()"> </iframe>