CODEWITHSUNDEEP
ionic-frameworkionic-native
MrRobot
MrRobot

Reputation: 1167

How to embed videos on Ionic

Hey guys I'm working on a app using Ionic/Angular and I got a problem. I have a video animation that I need to embed on the view. The idea is to create an experience similar to when you connect your airpods to an iPhone, the modal on the app will show up and the video should present.

The problem is that when I'm using the html video tag, the video is always presenting in full screen. How can I get that to work? Here is how I want to make it work. But obviously working inside my app. The video is just for the look. https://youtube.com/shorts/r4_PK2zxOnk?si=7VNv8WIpdsi3Xo2E

BTW I can also export each frame of the animation if there is a way around it like that. The video will also be part of the bundle.

Thanks guys

Upvotes: 0

Views: 106

Answers (2)

MrRobot
MrRobot

Reputation: 1167

For reference if anyone ever needs it, you can add playsinline as an attribute in the video tag.

<video autoplay playsinline muted loop class="custom-video">
    <source src="myvideo.mp4" type="video/mp4" />
</video>

Upvotes: 0

AmirAli Saghaei
AmirAli Saghaei

Reputation: 891

I usually use <iframe> for embedding videos. I think youtube has it's own way of sharing videos for embedding in html, it's probably not just putting the video address, it has a altered address, you should check it out before implementing.

In any case, you should be able to modify the normal video tags with css as well. if you have problems with that, I suggest using video-js or other html video players.

Upvotes: 0

Related Questions