Embedding youtube videos


#1

First of all, does ionic support embedding iframes of videos in mobile applications ?

If it does, I would like to know the best way to include youtube videos in an Ionic application.


Youtube 360° embedding not working
#2

I’ve used just a standard Iframe for youtube videos. The only trick I do is to include some extra css and markup to make the videos responsive, as described here


Embedded Youtube video in IOS Emulator
#3

Thanks for your reply @mhartington ! I Included some css like you said and it worked :smiley: Maybe I should pen this to help others.


Error installing cordova plugins
#4

Good idea, you could even go as far as to work up a demo using the responsive grid layout.


#5

hi @mhartington,
I faced the emedding youtube video problem.
Please refer to http://forum.ionicframework.com/t/embedding-youtube-videos-ios-platform/11896

Do you know how to solve it?
Thank you very much.


#6

Has anyone encountered similar issues with Vimeo?


#7

Use this:

<a> <div class="row"> <div class="col"> <div class="video-container"> <iframe src="http://www.youtube.com/embed/shGhZzJ7o-g?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </a>

CSS:

`.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}`

NOTES: keep rel=0, change code before question mark for different videos, its unique fingerprint for each video… keep embed… I put this in a list view with background image… works great!


#8

doesn’t worked for me :frowning:


#9

we can embed the url in HTML5 video src is this right option…