Embedded the CV overview video in introduction documentation #358
Conversation
✅ Deploy Preview for cv-doc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
docs/chapter1/1introduction.md
Outdated
| @@ -22,4 +22,6 @@ As the CircuitVerse community grows, educators and students can join the online | |||
|
|
|||
| Watch the below video for a quick demonstration of the CircuitVerse platform. | |||
|
|
|||
| [CV Marketing Video] | |||
| <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;"> | |||
There was a problem hiding this comment.
Sure @Prerna-0202 ma'am, The styling in the div was to make it look responsive maintaining youtube's aspect ratio 16:9
Actually when I removed all the styling and just converted it to <div> in line 25, The CV video filled all of the page because of position: absolute in line 26.
By removing all that position from line 26 too, The aspect ratio became poor. Below is the accompanying image.
Should I let it be like this or specify some different height and width? at present both height and width are 100%.
Thanks for the help.
There was a problem hiding this comment.
Have you tried applying both of the suggested changes I mentioned? Even after applying both suggestions, is the aspect ratio still not correct?
docs/chapter1/1introduction.md
Outdated
| @@ -22,4 +22,6 @@ As the CircuitVerse community grows, educators and students can join the online | |||
|
|
|||
| Watch the below video for a quick demonstration of the CircuitVerse platform. | |||
|
|
|||
| [CV Marketing Video] | |||
| <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;"> | |||
| <iframe style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/3Df-2Cn_80A" frameborder="0" allowfullscreen></iframe> | |||
There was a problem hiding this comment.
Also I think that if we write it like this instead of using inline styling, it will be better.<iframe width="500px" height="400px" src="https://www.youtube.com/embed/3Df-2Cn_80A" frameborder="0" scrolling="no" webkitAllowFullScreen mozAllowFullScreen allowFullScreen></iframe>
docs/chapter1/1introduction.md
Outdated
| @@ -22,4 +22,6 @@ As the CircuitVerse community grows, educators and students can join the online | |||
|
|
|||
| Watch the below video for a quick demonstration of the CircuitVerse platform. | |||
|
|
|||
| [CV Marketing Video] | |||
| <div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;"> | |||
There was a problem hiding this comment.
Have you tried applying both of the suggested changes I mentioned? Even after applying both suggestions, is the aspect ratio still not correct?
|
Thank you very much 🚀 |
|
@tachyons as the changes are approved, please take a look at the PR. |
Fixes #353
Changes done:
Screenshots:
before :
after :
Preview Link(s):
https://github.com/CircuitVerse/CircuitVerseDocs/pull/358/files#diff-be8049532e9abd127315370c8ffc90a920275c5fb3d7a4dfe197d0a225fa7946
✅️ By submitting this PR, I have verified the following