responsive YouTube in tinymce
5 posts by 2 authors in: Forums > CMS Builder
Last Post: July 11, 2016 (RSS)
By rez - July 10, 2016
How can we make YouTube embedded video responsive in the wysiwyg editor of CMSB?
something like:
https://yomotherboard.com/how-to-make-youtube-embeded-videos-responsive/
By Toledoh - July 11, 2016
I use http://fitvidsjs.com/ - pretty simple to implement and works a treat.
Tim (toledoh.com.au)
By rez - July 11, 2016 - edited: July 11, 2016
This looks nice but how does it work in wysiwyg? I can already put a video on a page that is responsive myself, outside of TinyMCE, allow an admin to put one in a particular spot on a page with an editor, or multiple ones. The problem I am having is giving a user control of a blog page. Maybe they want to post a video after paragraph 1. Then again after paragraph 3. Then a responsive photo towards the end. Whatever fits the paragraph they are on. This wysiwyg editor just doesnt seem made for all of this for a responsive site.
I thought I would try instructing writers to only add photos that are full width and centered. The same with video. Then I could target it with CSS and media queries, trying to make it work for every article. That sucks, it's all a workaround and not meant to be done in TinyMCE but i'm not sure how else to do it at this point. I fell like the best case scenario would be that the page would come out something like the following. Limiting, not very stylish, but works:
http://tympanus.net/codrops/2016/06/24/freebie-yoga-icons/
How else can you allow an admin to insert bullet lists, formatted text, photos or video, anywhere they want on the page and have it come out responsive like the above link?
I could create an editor that allows records of choosing to fill in a Heading, WYSIWYG, a photo, or a video. Then they build the page by pressing "create" every time they come to a media spot and making a list in CMSB :
Heading ----modify / erase
Photo ----modify / erase
TinyMCE ----modify / erase
Heading ----modify / erase
Video ----modify / erase
TinyMCE ----modify / erase
ect
That seems really cumbersome.
I'd rather not even use TinyMCE, I hate it. However, outside of it, they will lose all the text formatting and ability to inject media at any time. I may have to just go back to "You can only have 1 photo or video at the top or bottom. Keep everything in the WYSIWYG editor, text only. Or a full width photo only here and there. No floats in the article. Then there will be photos uploaded through TinyMCE, others in the editor through uploads. Messy.
I'm not sure yet.
By Toledoh - July 11, 2016
Hey Res,
Basically, you set fitvids.js to look for video within a certain class or ID. So if you wysiwyg content field is outputted into a div of the id="blogContent", the jQuery will automatically make that video responsive. Like magic:)
<script src="path/to/jquery.min.js"></script>
<script src="path/to/jquery.fitvids.js"></script><script> $(document).ready(function(){
$("#blogContent").fitVids();
});
</script>
Tim (toledoh.com.au)