I have to embed a video from my google drive in my website page. The video would initially be hidden behind an image and on clicking the image the video should start playing. The implementation that I have tried are as below,
1) using video tag
<video>
<source type="video/mp4"
src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview?rel=0;&autoplay=1&mute=1">
</video>
- This shows just the player without any video loading.
2) using iframe
<iframe width="560" height="315" src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
- Which kind of works but the video cannot be autoplayed by any means and the video is played after clicking it twice - initially video image is to be clicked then the play button.
- iframe elements cannot be accessed from the origin code.
- Also iframe is not supported in mozilla firefox.
3) using embed tag
<embed width="550px" height="310px" src="https://drive.google.com/file/d/1mNaIx2U3m7zL9FW-wksaI1m_rL5Oh47v/preview">
- Here autoplay and fullscreen both won't work.
- elements within embed cannot be accessed from the origin code.
Any help on this would be appreciated!