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/
Related
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>
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;
}
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//"
Can we make the following Google Map interactive provided the frame image is showing.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="button" onclick="$('#frame_image').show();" value="Show frame layer">
<input type="button" onclick="$('#frame_image').hide();" value="Hide frame layer">
<br /><br />
<div style="position: absolute; z-index: 1;">
<iframe frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no" src="https://maps.google.ca/maps?f=q&source=s_q&hl=en&geocode=&q=55+Avenue+Road,++Toronto,+Ontario+M5R+3L2+Canada&aq=&sll=43.656877,-79.32085&sspn=0.852471,2.113495&ie=UTF8&hq=&hnear=55+Avenue+Rd,+Toronto,+Ontario+M5R+1C6&t=m&z=14&ll=43.67111,-79.395217&output=embed&iwloc=near" ></iframe> <br />
<small>View Larger Map</small>
</div>
<div style="position: absolute; color:red; z-index: 2" id="frame_image">
<img src="http://torontoclinic.awkwardhosting.com/images/frame.gif" />
</div>
Code is also on the following link:
http://jsfiddle.net/pPrZV/
Please let me know if there is any other way via Google Maps API etc.
Thanks
Just apply this style to <iframe> of the google map
<iframe style="border-radius:250px" frameborder="0" width="358" height="358" marginheight="0" marginwidth="0" scrolling="no"...
Working jsFiddle here
here is my code snippet
<img src="images/home.jpg" height="40" width="150" />
<img src="images/contact.jpg" height="40" width="150" />
and
<iframe src="aboutseels.php" scrolling="auto" width="100%" height="360" ></iframe>
now, i was wondering if there is a way that when the client clicks one of the images, the src of the iframe will change??
for example if i click on the second image the src of the iframe will be src="contactus.php"
I think you set a name attribute on the iframe and wrap the images in an a tag with the target attribute to be the same name.
<iframe name="foo" ...></iframe>
...
you could use the javascript library jQuery and then use the click event to capture clicks on the images it could look something like this
$(function(){
$('img').click(function(){
iframeSrc = this.attr('title');
$('iframe').attr('src',iframeSrc);
});
});
and the html could look like this then
<img src="images/home.jpg" height="40" width="150" title="http://google.com" />
<img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>
Or use regular html and use target
<a target="iframe" href="http://facebook.com"><img src="images/home.jpg" height="40" width="150" title="http://google.com" /></a>
<a target="iframe" href="http://google.com"><img src="images/contact.jpg" height="40" width="150" title="http://facebook.com"/></a>
<iframe src="aboutseels.php" id="iframe" scrolling="auto" width="100%" height="360" ></iframe>