Skip to main content

Mediaelement YouTube Embed Player Integration

 Mediaelement YouTube Embed Player Integration


Firstly Check This Things :-


See Demo :- https://repl.it/@SH20RAJ/mediaelement#youtube-embed.html


Steps To Integrate :- 

1. Add src in <video/> Tag


 

<video width="640" height="360">
	<source src="https://www.youtube.com/watch?v=RroiPxzCYac" type="video/youtube">
</video>

2. Add Css CDN.


  
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.6/mediaelementplayer.css"/>

3. Add JavaScript CDN.


And it's done now.

    
	<script src="https://cdn.jsdelivr.net/gh/CDNSFree2/Mediaelements.js@main/mediaelements.js"></script>


See Demo Here :-


Tips :-

 
You can also add a poster attribute to show another image
example :-


poster="https://images.unsplash.com/photo-1611095968462-3dc56b14454a?ixid=MXwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80"


CXDI Demo :- https://codexd-india.blogspot.com/2021/03/mediaelement-youtube-embed-player.html


Download Files for working offline :- https://github.com/INDIECDN/mediaelement




Labels:

Comments

Post a Comment

Popular posts from this blog

FamilyAlbum - Free Unlimited Storage - Share Family Photos and Videos - Auto-Organized Album

Website :- https://family-album.com Play Store :- https://play.google.com/store/apps/details?id=us.mitene Description from Play Store The best way to safely share and organize your family’s photos and videos. Unlimited storage, no ads, and it’s free! 3 Reasons to Start Your Album: 1) You’ll love it YOUR MEMORIES ON DISPLAY. Show off your photos and videos in a way that’s both beautiful and intuitive. Everything is automatically sorted by month, complete with your child’s age. Just swipe the screen to go back in time! UNLIMITED STORAGE. Back up all your memories for free. STREAMLINED SHARING. No more sharing the same photo with five different group chats. All your photos, all your videos, all your favorite people, all in one place. YOUR PRIVACY IS OUR PRIORITY. Your album is completely private. All content you upload to the app belongs to you, and it can only be viewed by you and the family and friends you invite. That also ...
Post a Comment
Read more

Plyr.io Video Player - Integration - Skin Customizing - Adding Download Button

Plyr.io Video Player - Integration - Skin Customizing - Adding Download Button See the Pen Plyr.io Video Player - Skin Customizing to pink by SH20RAJ ( @SH20RAJ ) on CodePen . Integration :-  or Get Plyr CDNS From CDNJS Plyr <!-- Docs styles --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/CDNSFree2/Plyr/plyr.css" /> or Use CDNJS for CDN <link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.min.css" /> <!--Add a Simple HTML5 Video tag--> <video controls data-poster="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg" class="vid1"> <!-- Video files --> <source src="https://rebrand.ly/sample-video" type="video/mp4" size="576" /> </video> <script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.7/plyr.min.js"...
10 comments
Read more

Random Posts