Fix 3 issues (Unnecessary scrollbar on iFrames, Missing attributes for iFrame, Update readme with examples of videos in iFrame) #353
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This was referenced Mar 31, 2018
|
Good work, thanks! |
# for free
to join this conversation on GitHub.
Already have an account?
# to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR addresses 3 issues.
The functionality was tested on Chrome & Firefox on Ubuntu, and Chrome on Android.
1.
Unnecessary scrollbar on iFrames.
Related issues:
#305
Solution:
The
overflow-yattribute for iFrame should be removed (or set to 'auto')..
2.
Missing attributes for iFrame:
style,allow, etc.Related issues:
#269
Solution:
Add support for the following iFrame attributes:
data-featherlight-iframe-styledata-featherlight-iframe-allowdata-featherlight-iframe-webkitallowfullscreendata-featherlight-iframe-mozallowfullscreenThese are useful for embedding videos.
e.g.
<a href="http://www.youtube.com/embed/f0BzD1zCye0?rel=0&autoplay=1" data-featherlight="iframe" data-featherlight-iframe-frameborder="0" data-featherlight-iframe-allow="autoplay; encrypted-media" data-featherlight-iframe-allowfullscreen="true" data-featherlight-iframe-style="display:block;border:none;height:85vh;width:85vw;">.
3.
Add some examples to README for creating an iFrames with a YouTube video, and how to make it a fullsize window with 100% width or height.
Related issues:
#301
#188
#104
Solution:
I added 3 examples to the README.
There are many ways to achieve this but it took me a long time to find a method that actually worked, a method that didn't hide Featherlight's "close" icon, and a method that could be set using the style tag.
.