I have embedded a youtube video in an html file using the iframe tag provided by youtube. The video thumbnail loads on page but upon clicking play, an error message appear " video not available"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Youtube video</title>
</head>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/kw4tT7SCmaY"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media;
gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>
There are one rule in youtube. You can not embedded any channel video. So you are trying to embedded the video of T-Series and T-series don't allow to others to embedded there video.
Related
Please try to run once in local machine to see the exact problem
Screenshot:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe width="560" height="315" src="https://www.youtube.com/embed/S76snYXHQcE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
<!-- Music video -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/kffacxfA7G4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</body>
</html>
they just protect few videos to be read out of youtube.xxx with a server configuration. Something like this apache .htaccess file
RewriteCond "%{HTTP_REFERER}" "!^$"
RewriteCond "%{HTTP_REFERER}" "!www.example.com" [NC]
RewriteRule "\.(gif|jpg|png)$" "-" [F,NC]
this is what we use to protect pictures :Description:
The following technique forbids the practice of other sites including your images inline in their pages. This practice is often referred to as "hotlinking", and results in your bandwidth being used to serve content for someone else's site. https://httpd.apache.org/docs/2.4/rewrite/access.html
I have the following files:
index.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
iframe {
border: none;
display: block;
}
</style>
</head>
<body>
<iframe id="main-frame" src="child.htm" frameborder="0" sandbox="allow-same-origin" allowfullscreen></iframe>
</body>
</html>
child.htm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<iframe width="640" height="480" src="https://www.youtube.com/embed/jNQXAC9IVRw"
title="Me at the zoo" frameborder="0" sandbox="allow-same-origin"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</body>
</html>
If we run index.htm then we will get the error that js is unavailable. However, I checked the settings in my browser and claim that javascript is not blocked by it. I tested this in Firefox and Google Chrome and got the same error.
Q1: Why do we get an error about the unavailability of js?
Q2: How to fix it without changes of architecture of iframes?
sandbox="allow-same-origin allow-scripts" try again as.
and you can find the details here. enter link description here
I have some videos that are embedded on my webpage from YouTube. The thing is I am using the below-attached code to make it responsive (via bootstrap). It's good on mobile and tablets but on desktops and laptops is coming out to be very huge. When I could not solve the problem then I did not use YouTube embed and switched to the HTML5 video tag. In that, the responsive problem was solved by width:100% and height auto but the videos were not loading and kept on buffering. So, I again switched to YouTube embed so that at least the video loads but it's not really responsive (not on laptops, desktops). Also attaching the link for the webpage where the videos are embedded.
Code-
<div class="container">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
You can try setting a max-width on the iframe.
-- Video not loading in snippet ... Fiddle
.container {
display: flex;
justify-content: center;
}
iframe {
max-width: 900px;
max-height: 400px;
}
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<div class="container">
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube.com/embed/kq7CdSf7ocA?rel=0" title="YouTube video
player" frameborder="0" allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
I've a video embedded in my HTML, and it autoplays on reload. I want to disable the autoplay feature. I've tried autoplay = "false" property , but it doesnt work.
Here's my code
<html>
<body>
<div>
<iframe src="https://d1a2y8pfnfh44t.cloudfront.net/b79fac80851111e3b3e3a539a6199a02/full/540p/index.mp4" width="560" height="315" frameborder="0" allowfullscreen>
</iframe>
</div>
</body>
</html>
I am trying to embed a map using the code supplied by Google Maps with no alterations. When the page is displayed the Google pointer, zoom level indicator, etc. show but no streets or map, per se. This is the code Google suppled:
<iframe width="425" height="350" frameborder="0" scrolling="No" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&output=embed&iwloc=near&addr"></iframe>
<br />
<small>View Larger Map</small></div>
What is the problem?
It works on my machine.
Maybe you forgot to add the <html> and <body> tags. You also have a closing </div> that doesn't start anywhere, but it should nevertheless work even without its opening tag.
<html>
<head>
<title></title>
</head>
<body>
<div>
<iframe width="425" height="350" frameborder="0" scrolling="No" marginheight="0"
marginwidth="0" src="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&output=embed&iwloc=near&addr">
</iframe>
<br />
<small><a href="http://maps.google.com/maps?q=First+Baptist+Church,+Mc+Caysville,+GA+30555&hl=en&cd=2&ei=Gh10TNbbGZj0ygTT24nwCQ&sig2=hvRb-F6JuV91UcC6QUKGUw&ie=UTF8&view=map&cid=16713672426408470324&ved=0CBoQpQY&hq=First+Baptist+Church,+Mc+Caysville,+GA+30555&hnear=&ll=34.986955,-84.368584&spn=0.006153,0.013754&z=16&source=embed"
style="color: #0000FF; text-align: left">View Larger Map</a></small></div>
</body>
</html>