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>
Related
I am unable to get this (https://youtu.be/gnRxUDOJ-M0) youtube video to play in my browser even though I have another video that is working as intended. I'm not seeing what I am missing?
https://thepowerhousemethod.org/nextsteps.html
Working
<iframe width="560" height="315" src="https://youtu.be/gnRxUDOJ-M0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Not Working
<iframe width="560" height="315" src="https://www.youtube.com/embed/X0wNGbjmU4w" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Use the embed URL from Youtube and paste to .html page
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 can add a YouTube video to a survey like this
This uses embed code like this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/9QiE-M1LrZk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
But when I replace the src with a link to my own video
<iframe width="560" height="315" src="link_to_my_mp4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
It doesn't work (the video is not displayed on the survey).
Is there a way to achieve this?
(The reason I want to use videos on my own server is that I don't want people to have to watch ads on YouTube).
Thanks.
There are many question like this in stackoverflow but without answer that is why I am asking this question . This is showing only text not html iframe inside table td
<!DOCTYPE html> <html> <head></head> <body> <iframe width="1280" height="609" src="https://www.youtube.com/embed/VOoGQIBj9_Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </body> </html>
my code - this is working fine in w3schools but not here
Your code is working fine. Try only adding code withing iframe tag instead of whole HTML code.
<iframe width="1280" height="609" src="https://www.youtube.com/embed/VOoGQIBj9_Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I am trying (and failing) to make an embedded youtube video autoplay
Here is the code:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/jH1RNk8954Q"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
is there a way to make this autoplay? If so please could I have it.
In HTML and CSS by the way
Have a look at https://developers.google.com/youtube/player_parameters?hl=en
Sample there for autoplay:
<iframe id="ytplayer" type="text/html" width="640" height="360"
src="https://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"></iframe>