I'm trying to add a loop functionality to my vimeo video but is not working. Do you know if it's not supported on Chrome (Mac) or is there a way to fix it?
<iframe src="//player.vimeo.com/video/112412666#t=0s?title=0&byline=0&portrait=0&autoplay=1&loop=1" width="700" height="467" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
After a lot of research I found out that the problem was the "#t=0s" after the video ID, so the code should looks like this:
<iframe frameborder="0" width="700" height="467" src="http://player.vimeo.com/video/112412666?title=0&byline=0&portrait=0&autoplay=1&loop=1&autopause=0&color=fdea2e"></iframe>
Related
Apologies if this has been asked before, I found similar but not exactly what I'm looking for.
I've found various online tools to embed a responsive Youtube video, however in doing so, it makes them huge on desktop (as it's set to 100% I think and taking up the whole screen).
I found a piece of code that apparently fixes this problem here https://forum.freecodecamp.org/t/help-resizing-embed-youtube-video-with-css/210568 but am unsure where that code fits into what I have so far (i'm a complete novice with code).
Would someone be able to help and provide me with the full piece of code I will need (I only have access to the HTML), so that I can just slot in the youtube link?)
Thanks in advance!
You can make a YouTube Embed responsive with min and max width and height mentioned in the CSS. You can edit the code as per your needs and I do not know why Stack Overflow is not running the code, you can save it and run it manually.
As:
<iframe class="yt" src="https://www.youtube.com/embed/668nUCeBHyY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<style>
.yt{
width: 100%;
min-width:200;
max-width:800;
height: auto;
min-height:400;
}
</style>
I would like the labels of the Google maps that I have on the site to be in German. Although I have inserted language = de, the labels are still in the language of the country where I am. How can I change this? I have pasted the code bottom
<iframe class="map" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1128.3045106380598!2d14.307387666212339!3d46.627494951268254!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x477073627dfe541d%3A0x504b1e7483f2a53b!2sSt.+Veiter+Str.+7%2C+9020+Innere+Stadt%2C+Austria!5e0!3m2!1spl!2spl!4v1484087603660&language=de"
allowfullscreen></iframe>
Bear with me please, because I am a N00b.
I am creating an Ionic app with Firebase and AngularJS.
What I am trying to do is have a map load with the address location drawn from the database. (Being hard-coded is not an option) I can do this as an external link like this:
See Location
and it works, but it opens up to the web page google maps (which isn't practical for an app)
So, I have tried embedding the map in an iframe like this:
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
but I can't get it to work. My guess is because the iframe is "outside" of the page and not recognizing the dynamic data. Does anyone know how I can load the address dynamically into an embedded map, or is there a better way to do this using AngularJS? Ideally, I would like to have all the functions available in the app itself, even if this means having to go to a payed service. For now, though, I am trying to simply embed the map.
Thanks in advance!
Update1
I haven't found the fix yet, but I think I found the problem. In the console there is an error saying: "a trusted value is required" and then links to this, docs.angularjs.org/api/ng/service/$sce I will have to read over this and get back
Update 2
I added this to the Controller:
$scope.trustedURL = $sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxx");
And changed the html to this:
<iframe
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="{{trustedURL}}" allowfullscreen>
</iframe>
This fixed the error "a trusted value is required", but I am still getting the same result - a map with a randomly generated location. It's not recognizing the dynamically loaded data in {{}}. Any thoughts???
Try to use ng-src instead of src
<iframe
ng-controller="BrowseCtrl"
width="100%"
height="450px"
frameborder="0" style="border:0"
ng-src="https://www.google.com/maps/embed/v1/place?q={{task.street}}, {{task.city}}, {{task.zip}}&key=xxxxxxxx" allowfullscreen>
</iframe>
Use it like this:
<iframe
ng-src="{{ 'https://www.google.com/maps/embed/v1/place?q=' + task.street + ',' + task.city + ',' + task.zip + '&key=xxxxxxxx' }}">
</iframe>
Step 1
HTML Inside html use
[src]=methodToGetURL()
methodToGetURL: a function which return httl url from component file
EXAMPLE- iframe
[src]="methodToGetURL()" allowfullscreen /iframe'
Step 2) component file
Add DomSanitizer:
import {DomSanitizer} from '#angular/platform-browser';
function :
methodToGetURL() `enter code here`{
return this.domSanitizer.bypassSecurityTrustResourceUrl('https:Your URL here');
}
I like to post the video link on my website but that doesnot work
<div ng-repeat="vid in video">
<iframe class="embed-responsive-item" width="250px" height="250px" src="https://www.youtube.com/embed/+{{vid.youtube}}" frameborder="0" allowfullscreen></iframe>
</div>
The above code not working, please help.
You must use the ngSrc attribute as they say in the Angular documentation otherwise your browser tries to fetch the url with "{{vid.youtube}}".
Plus you don't need to add a "+", there isn't any on Youtube urls.
EDIT : I actually had the same problem with iFrames, and I forgot about it : you must tell Angular you "trust" the Url given. Take a look a this post, it's exactly the same problem.
I am trying to embed videos in my ionic app.
<div ng-show="showVideo" align="center">
<iframe margin="0" padding="0" border="none" width="700" height="400" frameBorder="0"
ng-src="{{exercise_video_url}}">
</iframe>
</div>
exercise_video_url I get from my database whose value is something like:
https://www.youtube.com/embed/iLOvmdrO*** (last letters *ed for privacy reason)
When the video is finished I see this:
How can I get rid of these suggestions and just play my video?
Just add ?rel=0 to the end of the embed url and it removes the similar video suggestions.
https://www.youtube.com/embed/iLOvmdrO***?rel=0