I am trying to embed an Iframe into a ngb-carousel. the carousel is showing up fine, the iframe "tab" is not:
<ngb-carousel *ngIf="project.images">
<ng-template class="item" ngbSlide *ngFor="let image of project.images">
<img class="img-fluid" [src]="image" alt="">
</ng-template>
<ng-template class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="project.video"></iframe>
</ng-template>
</ngb-carousel>
edit
stackblitz: https://stackblitz.com/edit/angular-xcmhun
You're missing the ngbSlide directive from the second ng-template in your example above. I edited your stackblitz example, adding that directive to the third ng-template in that example, and the embedded video shows up on a third tab as expected.
Forked example showing the solution: https://angular-ztaxde.stackblitz.io
yes please add ngbSlide:
<ngb-carousel>
<ng-template ngbSlide>
<iframe width="500" height="315" src="https://www.youtube.com/embed/J2qDRJdTGow" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</ng-template>
</ngb-carousel>
Related
I tried to include a Youtube video on a HTML page using the official "embed" code provided by Youtube and got an error Video not available, watch on youtube when displaying the page containing the given code:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ngywWphI7tk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
A minimal working example with 2 embedded videos, the first not working and the second one working:
<p>Test</p>
<iframe width="662" height="408" src="https://www.youtube.com/embed/ngywWphI7tk" title="Set Me on Fire" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/ZyDO4rMbSQA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I found that another website successfully embedded the video I failed to embed: https://www.musicme.com/Pendulum/videos/Set-Me-On-Fire-6E6779775770684937746B.html
with following code:
<iframe width="662" height="408" src="https://www.youtube.com/embed/ngywWphI7tk" title="Set Me on Fire" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
And even when I used directly this code (only difference was about dimensions), it failed on my side.
What can be the reason? How could I fix it? My current lead is that they might load it through JS so may interact with youtube API?
I've been trying to figure out how to stop the audio from playing after closing a modal, and nothing seems to work.
My attempt
<script>
var docReadyCodeForModal = setInterval(function() {
if(jQuery) {
clearInterval(docReadyCodeForModal);
$("#myModal").modal('show');
$("#stopClose").click(function(){
$("#myModal").modal('pause');
});
}
}, 100);
</script>
<div aria-hidden="true" class="fade modal" id="myModal" style="display:none">
<div class="modal-lg modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="text-align:center">WELCOME TO THE THUNDERDOME!!!</h5>
<button id="stopClose" class="close" data-dismiss="modal" type="button">×</button></div>
<div class="modal-body">
<div class="embed-responsive embed-responsive-16by9"><iframe class="embed-responsive-item video-not-resize" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" src="https://www.youtube.com/embed/yGwjyodRst4?autoplay=1" title="YouTube video player"></iframe></div>
</div>
</div>
</div>
</div>
Note: video link removed for privacy reasons.
I appreciate any insight into this issue
Script to stop the video from playing when closing modal
Add an id to your iframe and replace #iframe-id with that id.
$(document).ready(function(){
var url = $("#iframe-id").attr('src');
$("#myModal").on('hide.bs.modal', function(){
$("#iframe-id").attr('src', '');
});
$("#myModal").on('show.bs.modal', function(){
$("#iframe-id").attr('src', url);
});
});
You are using Bootstrap. This script listens to the Bootstrap events when hiding and showing the modal.
It removes the url from the iframe src attribute when closing modal and adds the url when the modal its opened.
I have the following code. My button works fine, however I cant figure out how you make the function work.
My goal is to create a button that when clicked opens up the iframe for a youtube video/makes it visible.
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p><button class="w3-center center transparent_btn"
onclick="play1()">go</button></p>
</div>
</div>
</body>
<script>
function play1() {
<iframe width="560" height="315" src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
}
You need to have an element that the iframe can be inserted into.
<body>
<div class="bgimg w3-display-container w3-animate-opacity w3-text-white">
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top">TAKE YOUR MARK</h1>
<hr class="w3-border-grey" style="margin:auto;width:40%">
<p><button class="w3-center center transparent_btn"
onclick="play1()">go</button></p>
<div id="youtube-frame"></div>
</div>
</div>
</body>
<script>
function play1() {
var frame = document.getElementById("youtube-frame");
frame.innerHTML += "<iframe width='560' height='315' src='https://www.youtube.com/embed/AkFs3YzxN_E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>";
}
</script>
Although youtube offers an API to control the player, but I'll keep things simple.
First, add a div inside your body and give it an ID of your choice.
Your play1() function should be like this:
function play1(){
var player = '<iframe width="560" height="315"
src="https://www.youtube.com/embed/AkFs3YzxN_E" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-
picture" allowfullscreen></iframe>';
document.getElementById('ID').innerHtml = player;
}
How can i disable/Hide share option on embedded dailymotion?
Blockquote
https://www.dailymotion.com/embed/video/x5hywa
You can disable it via the query string in the URL in the iframe.
--> "sharing-enable=false"
For instance:
<iframe frameborder="0" width="480" height="270"
src="//www.dailymotion.com/embed/video/x5hywa?sharing-enable=false"
allowfullscreen allow="autoplay"></iframe>
Just put that video in an iFrame and you're fine. There's no overlay.
<iframe src="https://www.dailymotion.com/embed/video/x5hywa" style="border:0px #ffffff none;" name="iFrame" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" height="400px" width="600px" allowfullscreen></iframe>
Example: http://jsfiddle.net/ysxf4qt3/
I'm a beginner to Laravel 5, and I'm trying to play a video in my page.
Video code :
<div class="videoWrapper">
<video controls="" autoplay="" width="640" height="360">
<source src="{{ $lesson->download }}{{$video}}" type="video/mp4"></source>
</video>
<!-- <iframe
width="100%"
height="315"
src="{{ $lesson->download }}{{$video}}"
frameborder="0" allowfullscreen></iframe> -->
<hr/>
</div>
The result :
When I inspect, the url is correct :
By the way, when I use the iframe for Youtube videos, it works.
Thank you
it's my code. maybe works for you:
#if(strpos($vidUrl,"video:")!== false)
<video onclick="showVideo()"style="display: block;"
src="{{str_replace('video:','', $vidUrl)}}" controls width="500"
#endif
my $vidUrl is something like "video://SOME_URL//"